43 lines
No EOL
1 KiB
JavaScript
Executable file
43 lines
No EOL
1 KiB
JavaScript
Executable file
let isDrawing = false;
|
|
let x0 = 0;
|
|
let y0 = 0;
|
|
let rectangle = null
|
|
|
|
document.addEventListener("DOMContentLoaded", function(){
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
var src = document.getElementById("current_color_stream");
|
|
var img = new Image();
|
|
img.src = src.src;
|
|
img.onload = function() {
|
|
draw(ctx, img);
|
|
};
|
|
|
|
canvas.addEventListener("mousedown", e => {
|
|
x0 = e.offsetX;
|
|
y0 = e.offsetY;
|
|
isDrawing = true;
|
|
});
|
|
|
|
canvas.addEventListener("mousemove", e => {
|
|
if(isDrawing === true) {
|
|
draw(ctx, img);
|
|
x1 = e.offsetX;
|
|
y1 = e.offsetY;
|
|
ctx.beginPath();
|
|
ctx.rect(x0,y0,x1-x0,y1-y0);
|
|
ctx.stroke();
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener("mouseup", e => {
|
|
if(isDrawing === true) {
|
|
|
|
}
|
|
isDrawing = false;
|
|
});
|
|
});
|
|
|
|
function draw(ctx, img){
|
|
ctx.drawImage(img, 0, 0)
|
|
} |