Can anyone suggest some code or tutorial how to create very basic drawing. I don’t need more than one button to activate drawing, one button for blue, one button for red color, undo button or erase button. I asked chatGPT but it just says I need some API.
Sorry but I just dont fu… manage to manage the content in this small text area. I hope this text and code bellow is not too confusing. But I need the function for drawing or erasing. Any one can help with this?
manifest.json
{
"manifest_version": 2,
"name": "My Draw Extension",
"version": "1.0",
"description": "Extension for drawing on the screen",
"icons": {
"48": "icon.png"
},
"permissions": [
"activeTab",
"storage"
],
"browser_action": {
"default_icon": {
"48": "icon.png"
},
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
<!DOCTYPE html>
<html>
<head>
<title>My Draw Extension</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
</head>
<body>
<div class="container">
<button id="redButton">Red</button>
<button id="blueButton">Blue</button>
<input type="range" id="thicknessSlider" min="1" max="10" value="1">
<button id="undoButton">Undo</button>
<button id="clearButton">Clear</button>
<button id="eraserButton">Eraser</button>
</div>
</body>
</html>
popup.css
css
.container {
display: flex;
flex-direction: row;
}
button {
margin: 5px;
}
- “popup.js”
$(document).ready(function() {
const redButton = $("#redButton");
const blueButton = $("#blueButton");
const thicknessSlider = $("#thicknessSlider");
const undoButton = $("#undoButton");
const clearButton = $("#clearButton");
const eraserButton = $("#eraserButton");
redButton.on("click", function() {
// Logic for selecting red color
});
blueButton.on("click", function() {
// Logic for selecting blue color
});
thicknessSlider.on("input", function() {
// Logic for changing line thickness based on slider value
const thickness = $(this).val();
// Update line thickness
});
undoButton.on("click", function() {
// Logic for undoing the last drawn line
});
clearButton.on("click", function() {
// Logic for clearing the drawing canvas
});
eraserButton.on("click", function() {
// Logic for activating the eraser mode
});
// ...
});
1. To file `popup.js` you should add the function to capturing the functions for drawing:
javascript
let isDrawing = false;
let previousX = 0;
let previousY = 0;
$(document).ready(function() {
// ...
// mousedown events
$(document).on("mousedown", function(e) {
isDrawing = true;
previousX = e.pageX;
previousY = e.pageY;
});
// mousemove events
$(document).on("mousemove", function(e) {
if (isDrawing) {
// implement logic for drawing
// based on previousX, previousY and current positions e.pageX, e.pageY
// U can use API like <canvas> or SVG.
}
previousX = e.pageX;
previousY = e.pageY;
});
// Add the events for mouse button release - end of drawing
$(document).on("mouseup", function() {
isDrawing = false;
});
// ...
});
```
popup.html
<!DOCTYPE html>
<html>
<head>
<title>My Draw Extension</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<!-- ... -->
</body>
</html>
popup.css
.container {
display: flex;
flex-direction: row;
}
button {
margin: 5px;
}
**popup.js**
```
$(document).ready(function() {
const redButton = $("#redButton");
const blueButton = $("#blueButton");
const thicknessSlider = $("#thicknessSlider");
const undoButton = $("#undoButton");
const clearButton = $("#clearButton");
const eraserButton = $("#eraserButton");
redButton.on("click", function() {
// change the color to red
});
// the rest of the code
});
```
