We Keep Coding

javascript drawing with canvas offset

First, I apologize for asking yet another question re canvas offsets. I see there are many related questions on stackoverflow, but I still couldn't solve my problem.
When I draw to canvas (see code below), it does not draw under the mouse cursor. It offsets to the right and down. I am expecting it to begin drawing under the mouse cursor.
Do I need to use any of these properties: Canvas offset? Event offset? ClientX? LayerX? OffsetLeft? OffsetTop?
move: function(event) {
this.prevX = this.currX;
this.prevY = this.currY;
this.currX = event.clientX;
this.currY = event.clientY;
if (this.drawing) {
this.ctx.lineTo(this.currX, this.currY);
this.ctx.stroke();
}
}
Can someone please correct the bug in the jsfiddle below and explain why it works the way it does?
https://jsfiddle.net/f9trjzk5/4/
The JavaScript uses vue.js. It's what I'm learning now. If you are unfamiliar with it, just pretend it's not there. You'll see you have access to both the canvas and context variables -- this.canvas, this.ctx.
Thanks very much!
UPDATE The line is also clearly being drawn faster than the movement of the mouse....
SOLVED Needed to replace style height and width properties with height and width attributes
style="height: 500px" width: 500px" --> height="500" width="500
To quote the helpful answer I was given on the vuejs forum:
What that does, is that is scales the canvas from its original (default) size up to match the width/height you've specified (like resizing an image, it becomes distorted). This is the same problem. That's why when moving the mouse to the right, it gets further and further away cos its a compounding effect.
https://forum.vuejs.org/t/canvas-drawing-wonky-under-vue-js-offset-all-weird/9028

How to clear rectangle on Image in Canvas

I need to clear a rectangle Drawn on Image in Canvas with out damage existing image. I can draw small rectangle points and clear that out. But the problem is when I clear rectangle it remains as white small patch on image.
Can someone tell me how to clear a rectangle on image without damage the existing image.
I have used following methods to clear rectangles but didn't work.
1) context.fillStyle ="white";
2) context.clearRect(xCoordinate, yCoordinate, 10, 08);
Thanks in advance!

Canvas doesn't work that way. It's a single layer, its also transparent by default. So with that in mind, you might be able to achieve what you want by simply giving the canvas element a CSS background. That way anything you draw on top of that background can easily be removed and the background will show through.
#backed-canvas{
background-image: url(http://www.placebear.com/300/200);
}
JSFiddle example: https://jsfiddle.net/yLf5erut/

There is one thing you can do.
When create a rectangle on the canvas just get the image data like:
var imgData = context.getImageData(xCoordinate, yCoordinate, 10, 8);
and draw the rectangle.
When clearing out the rectangle just place then image data back like this:
context.putImageData(imgData, xCoordinate, yCoordinate);

I suggest using 2 canvas elements one over another.
So you can have the original image drawn on the bottom canvas with low zIndex, and the top one with highter zIndex can be used to draw / clear whatever needed. This is a common practice, and for more complecated animations you will end up with better performance.

Display X through div of different sizes

Problem
How would you go about displaying an X through div's of different sizes so it hits all four corners? I want one solid 1px black line to go from the top left to the bottom right of the div, and another solid 1px black line to go from the top right to the bottom left.
Example
If you're not following what I'm talking about, check out my mockup here.
Thoughts
The only solution I can think of for this problem, isn't a solution at all, but just a starting point for thinking about how to implement it. I figure I'd have two solid 1px black lines in the center of the div, and then use CSS to transform: rotate (45deg) on one line, and transform: rotate (-45deg) the other. Of course this isn't a solution that will work with any size div, since the rotation of 45 degrees will only work for a square <div>. I have a feeling I'm going to need some javascript to calculate the rotation angles. I'd really prefer a pure CSS solution, but I'm not sure CSS would be able to achieve this.
Code
Here is the code I currently have. The X is going to be placed through the .overlay class.
Edit
Edit #1: If it helps, all of my images are the same width.
Edit #2: Is there a way to use HTML Canvas lineTo() to reference corners of divs as values?

I think one possible solution for this is a CSS linear-gradient:on the background:. You create a gradient with two color breaks positioned near 50%. Se the middle break to black, and the rest to transparent. This leaves a thin black line for us to angle however we want. Then you just replicate the gradient it and mirror the angle. Something like the CSS below:
.image:hover .overlay {
//your other exising styles
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(49%,transparent),
color-stop(49%,#000000),
color-stop(50%,transparent)),
-webkit-gradient(linear, right top, left bottom,
color-stop(49%,transparent),
color-stop(49%,#000000),
color-stop(50%,transparent));
}
EXAMPLE DEMO FIDDLE
The only remaining issue is that since your images vary in aspect ratio, you can't have your "X" always hit the corners of your image. You'll need to standardize the ratio of your images, or code some javascript that will dynamically do it for each image.
Hope that helps.

moving a turtle on a canvas

I have an assignment with which i have multiple problems.
Simply put we need to move a turtle on a canvas forwards/backwards rotating it right/left with a given amount.
The turtle can leave a "trace" (a colored line or something) behind him when moving and when he reaches the end of the canvas it has to appear on the other side
now one of my problems is how can i move the turtle without redrawing the whole canvas, because i can't lose the turtles "trace" when he moves
the other thing is that i have no problem moving it in the 4 "normal" directions and appearing and the other side but i think we need to be able to rotate it any amount of degrees and move it in that direction and i don't really know how to do this
my code is not very advanced for these reasons i only have the canvas and the form from which i get my parameters
i don't really know what else to say about it, if necessary i will include all the code i have
UPDATE:
i think for the first problem about redrawing the canvas i can use clearRect(locX,locY,imgWidth,imgHeight) so i clear the area where the image was and draw only the image next to it, but if i'm wrong i'm open for tips

You can use 2 overlapping canvases to more easily display your turtle and your tracks.
Put your tracks on the bottom canvas (no need to ever clear/erase this bottom canvas).
Put your turtle on the top canvas (always clear this canvas and redraw the turtle in its new position).
Here's the HTML:
<div id="wrapper">
<canvas id="canvasBottom" width=300 height=200></canvas>
<canvas id="canvasTop" width=300 height=200></canvas>
</div>
Here's the CSS used to overlap the 2 canvases:
#wrapper{
position:relative;
width:300px;
height:200px;
}
#canvasTop,#canvasBottom{
position:absolute; top:0px; left:0px;
border:1px solid green;
width:100%;
height:100%;
}
#canvasTop{
border:1px solid red;
}
To rotate your turtle, check out this tutorial on how to combine context.translate and context.rotate to display a rotated object:
http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/
To move your turtle along a linear path, start out with this tutorial on how to animate an object:
http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/

HTML5 canvas, user drawing resize and rotate

I have a canvas on which the user can draw with some sort of pen.
The canvas height is slightly larger than the width. The actual size depends on several variables.
I want to give the user the ability to rotate his/her drawing.
I'm creating a new canvas on which i draw the old canvas rotated.
Below is how i did 180 degrease.
if(rotation==180){
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(Math.PI);
ctx.translate(-canvas.width/2, -canvas.height/2);
ctx.drawImage(drawing,0,0);
}
Now for the 90 degrease I also have to do a resize because otherwise it won´t fit anymore.
I'm not even sure where to start. Any ideas on how to do this?

See this posts
HTML5 canvas image rotate left rotate right
http://phptechworld.blogspot.in/2012/10/html5-canvas-image-rotation.html

u can use CSS3 for rotation:like
h1
{
rotation-point:50% 50%;
rotation:180deg;
}