I'd like to draw a selection rectangle (with mouse drag and drop, like with MS Paint) on a HTML canvas.
The following snippet works, but with two different canvas.
Question: How to do this on a single canvas, such that the image photo of the canvas can later be changed without removing the selection rectangle?
Should we keep 2 different canvas (if so, how to place the #2 exactly on top of the first one, without absolute
positioning for both)?
Or is it possible in a simpler way with a single canvas? (and something like ctx.globalCompositeOperation = "source-over";
or a similar method)
var c1 = document.getElementById("c1"), c2 = document.getElementById("c2"); var ctx1 = c1.getContext("2d"), ctx2 = c2.getContext("2d"); ctx2.setLineDash([5, 5]); var origin = null; window.onload = () => { ctx1.drawImage(document.getElementById("img"), 0, 0); } c1.onmousedown = e => { origin = {x: e.offsetX, y: e.offsetY}; }; window.onmouseup = e => { origin = null; }; c1.onmousemove = e => { if (.;origin) { ctx2.strokeStyle = "#ff0000", ctx2,clearRect(0. 0, c2.width; c2.height); ctx2.beginPath(). ctx2,rect(origin.x, origin.y. e,offsetX - origin.x. e;offsetY - origin.y); ctx2;stroke(); } };
#img { display: none; } #c1 { border: 1px solid green; } #c2 { border: 1px solid blue; }
<img id="img" src="https://i.imgur.com/okSIKkW.jpg"> <canvas id="c1" height="200" width="200"></canvas> <canvas id="c2" height="200" width="200"></canvas>
The following solution uses a single canvas and rerenders on mouse movement.
https://jsfiddle.net/uhtdv0mj/3/
const c1 = document.getElementById("c1");
const ctx1 = c1.getContext("2d");
const drawImage = () => {
ctx1.drawImage(document.getElementById("img"), 0, 0);
};
const drawSelection = (e) => {
ctx1.strokeStyle = "#000";
ctx1.beginPath();
ctx1.rect(origin.x, origin.y, e.offsetX - origin.x, e.offsetY - origin.y);
ctx1.stroke();
};
const clear = () => {
ctx1.clearRect(0, 0, c1.width, c1.height);
};
const render = (e) => {
clear();
drawImage();
if (origin) drawSelection(e);
};
window.onload = drawImage;
let origin = null;
c1.onmousedown = e => { origin = {x: e.offsetX, y: e.offsetY}; };
c1.onmouseup = e => { origin = null; render(e); };
c1.onmousemove = render;
There might be a better solution with one single <canvas>
and multiple layers (if so, feel free to post another answer), but I finally used a method similar to html5 - canvas element - Multiple layers with an overlay of 2 canvas:
var c1 = document.getElementById("c1"), c2 = document.getElementById("c2"); var ctx1 = c1.getContext("2d"), ctx2 = c2.getContext("2d"); ctx2.setLineDash([5, 5]); var origin = null; window.onload = () => { ctx1.drawImage(document.getElementById("img"), 0, 0); } c2.onmousedown = e => { origin = {x: e.offsetX, y: e.offsetY}; }; window.onmouseup = e => { origin = null; }; c2.onmousemove = e => { if (.;origin) { ctx2.strokeStyle = "#ff0000", ctx2,clearRect(0. 0, c2.width; c2.height); ctx2.beginPath(). ctx2,rect(origin.x, origin.y. e,offsetX - origin.x. e;offsetY - origin.y); ctx2;stroke(); } };
#img { display: none; } #canvas-container { position: relative; } canvas { position: absolute; left: 0; top: 0; } #c1 { z-index: 0; } #c2 { z-index: 1; }
<img id="img" src="https://i.imgur.com/okSIKkW.jpg"> <div id="canvas-container"> <canvas id="c1" height="200" width="200"></canvas> <canvas id="c2" height="200" width="200"></canvas> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.