We Keep Coding

canvas with a cursor follower [duplicate]

This question already has answers here:
Is there any way to accelerate the mousemove event?
(2 answers)
Closed 4 years ago.
$(function(){
var mouseX = 0;
var mouseY = 0;
$('body,html').mousemove(function(e){
var gap = parseInt($('#stalker').css("width")) / 2;
mouseX = e.pageX - gap;
mouseY = e.pageY - gap;
$('#stalker').css('left', mouseX);
$('#stalker').css('top', mouseY);
});
var canvas = document.getElementById('mycanvas');
if(!canvas || !canvas.getContext) return false;
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2;
ctx.lineJoin = ctx.lineCap = 'round';
var startX,
startY,
x,
y,
borderWidth = 5,
isDrawing = false;
$('#mycanvas,#stalker').mousedown(function(e){
startX = e.pageX - $('#mycanvas').offset().left - borderWidth;
startY = e.pageY - $('#mycanvas').offset().top - borderWidth;
})
.mouseup(function(e){
if(!isDrawing) return;
x = e.pageX - $('#mycanvas').offset().left - borderWidth;
y = e.pageY - $('#mycanvas').offset().top - borderWidth;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(x,y);
ctx.stroke();
})
$('#mycanvas').mouseenter(function(e){
startX = e.pageX - $('#mycanvas').offset().left - borderWidth;
startY = e.pageY - $('#mycanvas').offset().top - borderWidth;
});
$('body,html').mousedown(function(e){
isDrawing = true;
})
.mouseup(function(e){
isDrawing = false;
});
$('#mycanvas,#stalker').mousemove(function(e){
if(!isDrawing) return;
x = e.pageX - $('#mycanvas').offset().left - borderWidth;
y = e.pageY - $('#mycanvas').offset().top - borderWidth;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(x,y);
ctx.stroke();
startX = x;
startY = y;
});
});
#mycanvas{
border:5px solid #999;
}
#stalker{
position:absolute;
width:80px;
height:80px;
border:solid 1px gray;
border-radius:50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="stalker"></div>
<canvas width="550px" height="500px" id="mycanvas">
</canvas>
I'm trying to make a drawing app with canvas,
and I needed a circle that keeps following the cursor while drawing.
so I wrote the above code,
but it's not really working: if I draw a line slowly it looks fine, but if I move the cursor faster, the line doesn't connect.
The line would be like two or three separate lines even though I'm not releasing the mouse click.
I thought this could be because #stalker is not catching up the speed of the cursor, so I put "mousedown" and "mousemove" on #mycanvas too, but still it doesn't work.
Does anyone know why?

you can save mouse positions in an array, and then draw it
a quick example:
$(function(){
var mouseX = 0;
var mouseY = 0;
$('body,html').mousemove(function(e){
var gap = parseInt($('#stalker').css("width")) / 2;
mouseX = e.pageX - gap;
mouseY = e.pageY - gap;
$('#stalker').css('left', mouseX);
$('#stalker').css('top', mouseY);
});
var canvas = document.getElementById('mycanvas');
if(!canvas || !canvas.getContext) return false;
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2;
ctx.lineJoin = ctx.lineCap = 'round';
var startX,
startY,
x,
y,
borderWidth = 5,
isDrawing = false,
lines = [];
$('body,html').mousedown(function(e){
isDrawing = true;
lines.push([]);
})
.mouseup(function(e){
isDrawing = false;
});
$('#mycanvas,#stalker').mousemove(function(e){
if(!isDrawing) return;
x = e.pageX - $('#mycanvas').offset().left - borderWidth;
y = e.pageY - $('#mycanvas').offset().top - borderWidth;
lines[lines.length-1].push([x, y]);
});
function render() {
ctx.clearRect(0, 0, 550, 500);
for (const line of lines) {
ctx.beginPath();
for (const [i, pos] of Object.entries(line)) {
if (!+i) {
ctx.moveTo(pos[0], pos[1]);
} else {
ctx.lineTo(pos[0], pos[1]);
}
}
ctx.stroke();
}
}
(function loop() {
render();
requestAnimationFrame(loop);
})();
});

HTML5 Canvas - retain drawn rectangles on images

I have an image gallery. When a image from gallery is clicked, it is rendered on a canvas. The objective is to allow users to draw rectangles on regions of interest and capture the rectangle coordinates. The drawn rectangles vanishes when I move to the next image.
The following is the code and I have tried to comment as much as I can:
//get clicked image name and store in a variable
function clickedImage(clicked_id) {
var clickedImg = document.getElementById(clicked_id).src;
var clickedImg = clickedImg.replace(/^.*[\\\/]/, '');
localStorage.setItem("clickedImg", clickedImg);
//initiate canvas to load image
var canvas = document.getElementById("iriscanvas");
var ctx = canvas.getContext("2d");
var thumbNails = document.getElementById("loaded_img_panel");
var pic = new Image();
pic.onload = function() {
ctx.drawImage(pic, 0,0)
}
//load the image from the thumbnail on to the canvas
thumbNails.addEventListener('click', function(event) {
pic.src = event.target.src;
});
//thickness of rectangle and count of rectangles
var strokeWidth = 3;
drawCount = 1;
//initiate mouse events
canvas.addEventListener("mousemove", function(e) {
drawRectangleOnCanvas.handleMouseMove(e);
}, false);
canvas.addEventListener("mousedown", function(e) {
drawRectangleOnCanvas.handleMouseDown(e);
}, false);
canvas.addEventListener("mouseup", function(e) {
drawRectangleOnCanvas.handleMouseUp(e);
}, false);
canvas.addEventListener("mouseout", function(e) {
drawRectangleOnCanvas.handleMouseOut(e);
}, false);
function reOffset() {
var BB = canvas.getBoundingClientRect();
recOffsetX = BB.left;
recOffsetY = BB.top;
}
var recOffsetX, recOffsetY;
reOffset();
window.onscroll = function(e) {
reOffset();
}
window.onresize = function(e) {
reOffset();
}
var isRecDown = false;
var startX, startY;
var rects = [];
var newRect;
var drawRectangleOnCanvas = {
handleMouseDown: function(e) {
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
startX = parseInt(e.clientX - recOffsetX);
startY = parseInt(e.clientY - recOffsetY);
// Put your mousedown stuff here
isRecDown = true;
},
handleMouseUp: function(e) {
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX = parseInt(e.clientX - recOffsetX);
mouseY = parseInt(e.clientY - recOffsetY);
// Put your mouseup stuff here
isRecDown = false;
//if(!willOverlap(newRect)){
rects.push(newRect);
//}
drawRectangleOnCanvas.drawAll();
var brand = localStorage.getItem("brandNode");
var clickImg = localStorage.getItem("clickedImg");
//get x,y,w,h coordinates depending on how the rectangle is drawn.
if((mouseX-startX) < 0) {
stX = startX + (mouseX-startX)
} else {
stX = startX
}
if((mouseY-startY) < 0) {
stY = startY + (mouseY-startY)
} else {
stY = startY
}
if((mouseX-startX) < 0) {
stW = startX - stX
} else {
stW = mouseX - startX
}
if((mouseY-startY) < 0) {
stH = startY - stY
} else {
stH = mouseY - startY
}
//log the coordinates of the rectangles
var dat = {image : clickImg, brand: brand, x : stX, y : stY, w: stW, h: stH};
var dat = JSON.stringify(dat);
console.log(dat);
},
drawAll: function() {
ctx.drawImage(pic, 0, 0);
ctx.lineWidth = strokeWidth;
var brand = localStorage.getItem("brandNode");
for (var i = 0; i < rects.length; i++) {
var r = rects[i];
ctx.strokeStyle = r.color;
ctx.globalAlpha = 1;
ctx.strokeRect(r.left, r.top, r.right - r.left, r.bottom - r.top);
ctx.beginPath();
//ctx.arc(r.left, r.top, 15, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = r.color;
ctx.fill();
var text = brand;
ctx.fillStyle = "#fff";
var font = "bold " + 12 + "px serif";
ctx.font = font;
var width = ctx.measureText(text).width;
var height = ctx.measureText("h").height; // this is a GUESS of height
ctx.fillText(text, r.left-1, r.top - 10)
}
},
handleMouseOut: function(e) {
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX = parseInt(e.clientX - recOffsetX);
mouseY = parseInt(e.clientY - recOffsetY);
// Put your mouseOut stuff here
isRecDown = false;
},
handleMouseMove: function(e) {
if (!isRecDown) {
return;
}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX = parseInt(e.clientX - recOffsetX);
mouseY = parseInt(e.clientY - recOffsetY);
newRect = {
left: Math.min(startX, mouseX),
right: Math.max(startX, mouseX),
top: Math.min(startY, mouseY),
bottom: Math.max(startY, mouseY),
color: "#9afe2e"
}
drawRectangleOnCanvas.drawAll();
ctx.strokeStyle = "#9afe2e";
ctx.lineWidth = strokeWidth;
ctx.globalAlpha = 1;
ctx.strokeRect(startX, startY, mouseX - startX, mouseY - startY);
}
}
}
When I move to the next image the rectangles created on the previous image is removed. I don't know if I have to use canvas.toDataURL to retain the rectangles, because I have thousands of images in the gallery and not sure if I will have space in the browser, though not all the images are going to the used for drawing rectangles.
Moreover, after drawing the rectangles when I click on the same image, it clears all the rectangles.
How can I retain the drawn rectangles within a session at least?

Layer 2 canvases over each other. Render the image into the bottom canvas, and draw on the top one. That way, changing the image won't affect the drawn lines.
A <canvas> works just like a real-life painter's canvas. There is no concept of layers or "objects" on a canvas. It's all just paint on a single surface.
When you draw a different image on a canvas, you're overriding everything that was on the canvas already.

How to clear trails when drawing rectangles on an HMTL5 canvas

I am currently working on an application where I draw a rectangle on a canvas. I can draw the rectangle perfectly but then when I try to change the movement of the mouse to make the rectangle smaller there are trails that are left behind. How do I clear these trails when I make the rectangle's size smaller? below is my JavaScript code that I used. Thanks in advance.
function drawSquare() {
// creating a square
var w = lastX - startX;
var h = lastY - startY;
var offsetX = (w < 0) ? w : 0;
var offsetY = (h < 0) ? h : 0;
var width = Math.abs(w);
var height = Math.abs(h);
context.beginPath();
context.rect(startX + offsetX, startY + offsetY, width, height);
context.fillStyle = "gold";
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
canvas.style.cursor = "default";
}
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {
x: e.pageX - canvas.offsetLeft,
y: e.pageY - canvas.offsetTop,
};
}
function handleMouseDown(e) {
// get mouse coordinates
mouseX = parseInt(e.pageX - offsetX);
mouseY = parseInt(e.pageY - offsetY);
// set the starting drag position
lastX = mouseX;
lastY = mouseY;
isDown = true;
if (isChecBoxClicked == true) {
mouseIsDown = 1;
startX = lastX;
startY = lastY;
var pos = getMousePos(canvas, e);
startX = lastX = pos.x;
startY = lastY = pos.y;
drawSquare();
}
else {
canvas.style.cursor = "default";
}
}
function handleMouseUp(e) {
// clear the dragging flag
isDown = false;
canvas.style.cursor = "default";
// get mouse coordinates
mouseX = parseInt(e.pageX - offsetX);
mouseY = parseInt(e.pageY - offsetY);
// set the starting drag position
lastX = mouseX;
lastY = mouseY;
if (isChecBoxClicked == true)
{
canvas.style.cursor = "crosshair";
if (mouseIsDown !== 0) {
mouseIsDown = 0;
var pos = getMousePos(canvas, e);
lastX = pos.x;
lastY = pos.y;
drawSquare();
}
}
}
function handleMouseMove(e) {
// if we're not dragging, exit
if (!isDown) {
return;
}
//if (defaultval == 1) {
// return;
//}
if (isChecBoxClicked == true) {
canvas.style.cursor = "crosshair";
if (mouseIsDown !== 0) {
var pos = getMousePos(canvas, e);
lastX = pos.x;
lastY = pos.y;
drawSquare();
}
}
}

A canvas doesn't clear itself. At least not a 2D context, like you are using. If you keep drawing on it, the new graphics is placed on top of the old. You need to explicitly clear it:
context.clearRect(0, 0, canvas.width, canvas.height);

You will probably have to clear your canvas. If you are only drawing a square you will have to do that in the drawSquare function. If you are drawing multiple things you will have to do it in a higher function that redraws multiple things.
For clearing the whole canvas, you can use the following code:
context.clearRect ( 0 , 0 , canvas.width, canvas.height );
There are also a lot of canvas libraries that will manage this for you and optimize the areas redrawn (they might only clear a part of the canvas, so there are less pixels redrawn)

How can I resize an image pattern when the pattern is draggable?

I used this Resize an image with javascript for use inside a canvas createPattern to resize the initial image, but when I try to put the same code in my drag/drop functionality, it does not work correctly (it creates a new image and when I try to drag it, it gets strange - see image below. the "O" has the image before dragging/dropping, the "P" has the image after dragging/dropping).
Here is the code I am using:
function photos_create_preview_image(element)
{
console.log(element.id);
if(element.id.indexOf("canvas") != -1)
{
var canvas = document.getElementById(element.id);
var ctx = canvas.getContext("2d");
var canvasOffset = $("#" + element.id).offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isDown = false;
var startX;
var startY;
var imgX = 0;
var imgY = 0;
var imgWidth, imgHeight;
var mouseX, mouseY;
var new_img = new Image();
new_img.onload = function()
{
var tempCanvas = photos_create_temp_canvas(new_img);
imgWidth = new_img.width;
imgHeight = new_img.height;
//var pattern = ctx.createPattern(new_img, "no-repeat");
var pattern = ctx.createPattern(tempCanvas, "no-repeat");
ctx.fillStyle = pattern;
ctx.fill();
};
new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
function photos_create_temp_canvas(new_img)
{
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = new_img.width / 3; //TODO: Figure out what this should be, right now it is just a "magic number"
tempCanvas.height = new_img.height / 3 ;
tCtx.drawImage(new_img,0,0,new_img.width,new_img.height,0,0,new_img.width / 3,new_img.height / 3);
return tempCanvas;
}
function handleMouseDown(e)
{
e.preventDefault();
startX = parseInt(e.pageX - window.scrollX);
startY = parseInt(e.pageY - window.scrollY);
if (startX >= imgX && startX <= imgX + imgWidth && startY >= imgY && startY <= imgY + imgHeight) {
isDown = true;
}
}
function handleMouseUp(e)
{
e.preventDefault();
isDown = false;
}
function handleMouseOut(e)
{
e.preventDefault();
isDown = false;
}
function handleMouseMove(e)
{
if (!isDown) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
if (!isDown) {
return;
}
imgX += mouseX - startX;
imgY += mouseY - startY;
startX = mouseX;
startY = mouseY;
var tempCanvas = photos_create_temp_canvas(new_img);
var pattern = ctx.createPattern(tempCanvas, "no-repeat");
//var pattern = ctx.createPattern(new_img, "no-repeat");
ctx.save();
ctx.translate(imgX, imgY);
ctx.fillStyle = pattern;
ctx.fill();
ctx.restore();
}
$("#" + element.id).mousedown(function (e) {
handleMouseDown(e);
});
$("#" + element.id).mousemove(function (e) {
handleMouseMove(e);
});
$("#" + element.id).mouseup(function (e) {
handleMouseUp(e);
});
$("#" + element.id).mouseout(function (e) {
handleMouseOut(e);
});
}
else //You can ignore this - not relevant to the question
{
new_img = new Image();
new_img.onload = function() {
this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
this.height /= 3;
element.appendChild(new_img);
$(new_img).draggable({ containment: "parent" });
};
new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
}
console.log("new image: " + new_img.src);
}
I changed the code to:
...
ctx.fillStyle = "#BFBFBF";
ctx.fill();
var tempCanvas = photos_create_temp_canvas(new_img);
var pattern = ctx.createPattern(tempCanvas, "no-repeat");
ctx.save();
ctx.translate(imgX, imgY);
ctx.fillStyle = pattern;
ctx.fill();
ctx.restore();
...
And that part works but, now it is only letting me move the image from the bottom. (See image below)

You need to clear the canvas before redrawing:
function handleMouseMove(e)
{
...
var tempCanvas = photos_create_temp_canvas(new_img);
var pattern = ctx.createPattern(tempCanvas, "no-repeat");
//var pattern = ctx.createPattern(new_img, "no-repeat");
ctx.save();
ctx.translate(imgX, imgY);
ctx.fillStyle = pattern;
ctx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
ctx.fill();
ctx.restore();
}

[Javascript]: Sprite is offset

So I was coding some game (or what I call game) in JavaScript. And basically, you're supposed to click a place on the canvas and the player will be drawn there. But when I clicked the sprite was offset by some amount (I don't exactly know how much) to the point on the mouse. How can I get it so that the sprite will be draw exactly on the point of the mouse?
Link to image: http://i.imgur.com/Wnqb3L6.jpg?1
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', mouseMoved, false);
canvas.addEventListener('click', drawPlayerPos, false);
var spriteSheet = new Image();
spriteSheet.src = 'spritesheet.png';
spriteSheet.addEventListener('load', init, false);
var gameWidth = canvas.width;
var gameHeight = canvas.height;
function init()
{
drawPlayerPos();
}
var mouseX;
var mouseY;
function mouseMoved(e)
{
mouseX = e.pageX - canvas.offsetLeft;
mouseY = e.pageY - canvas.offsetTop;
document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
}
function drawPlayerPos()
{
var srcX = 1;
var srcY = 1;
var drawX = mouseX;
var drawY = mouseY;
var width = 15;
var height = 15;
ctx.drawImage(spriteSheet,srcX,srcY,width,height,drawX,drawY,width,height);
}

If the sprite is 15x15, you want srcX and srcY to be 0, not 1. And note that your code draws the top left corner of the sprite at the mouse point; if you want it to be centered you need to do:
drawX = mouseX - width / 2;
drawY = mouseY - height / 2;