I have a canvas with a large image in the background and a smaller round image in front of it. I achieved this round image effect by using clip like so
ctx.save();
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2, true);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,x-r,y-r,2*r,2*r); // draw the image
ctx.restore();
then I want to rotate the round image, so I use a second context and rotate and redraw like so
backCanvas=document.createElement('canvas');
backContext=backCanvas.getContext('2d');
backCanvas.width=w;
backCanvas.height=h;
backContext.translate(w/2,h/2);
backContext.rotate(a);
backContext.drawImage(img,-w/2,-h/2,w,h);
var imgData=backContext.getImageData(0,0,w,h);
ctx.save();
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2, true);
ctx.closePath();
ctx.clip();
ctx.putImageData(imgData,x,y);
ctx.restore();
But what happens is that the black-transparent background gets copied from the back canvas and the clip fails to "clip" it.
Any help would be appreciated
According to the specs,
The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.
In your case, why are you using an additional canvas and pixel data manipulations? Why not just
ctx.save();
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.clip();
ctx.translate(x, y);
ctx.drawImage(img, -r, -r, 2*r, 2*r);
// not restoring context here, saving the clipping region and translation matrix
// ... here goes the second part, wherever it is:
ctx.save();
ctx.rotate(a);
ctx.drawImage(img, -r, -r, 2*r, 2*r);
ctx.restore();
Related
If I have this,
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(150, 25);
ctx.rotate(Math.PI*7/4); //315 degrees
ctx.lineTo(150,90);
ctx.stroke();
It does not draw the line (the ctx.lineTo(150,90);) at the angle I thought it would which is from the end of the first lineTo at 25,25 to a 150,90 at a 45 degree angle. If I use -Math.PI*7/4 I get what looks like a 45 degree angle, but it points the wrong way. Math.PI*5/4 goes the wrong way or rotation.
My question asks about the Unit Circle. I don't really need them all at once, just the ability to know how to draw them if I need them.
The canvas is rotating this way:
Consider the following example, without the y offset:
Given by the code:
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(25, 0);
ctx.lineTo(250, 0);
ctx.rotate(45*Math.PI/180); //45 degrees
ctx.lineTo(150,0);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(350,0);
ctx.font = "30px Arial";
ctx.fillText("New x axis",100,50);
ctx.stroke();
The red line is the new x axis, and the black line touches it exactly at a distance of 150 from the origin.
Now overlaying the same red line with your coordinates (and rotating by 45 degrees, so that it doesn't go off screen), we get
The black line ends at a point which is indeed (150,90), however at the new coordinate system. JSFiddle here
If you want the angle between the two line segments to be exactly what you pass in rotate(...), then keep drawing "horizontal" lines, but translate the origin to the end of each line segment, so you rotate about this point, not the top-left corner, using ctx.translate(<current point>). For example: https://jsfiddle.net/Douma37/65z1p38z/ (this goes off canvas, but has minimal interferance with your code).
Hope that helps!
I studied strokeStyle a bit but I cant find how to control the position of the stroke from inner/center/outer. It seems all stroke is outside the rectangle I draw. Is there anyway make the stroke be inner? (or even centered on the rectangle bounds)?
Thanks
Hope this helps!
Instead of doing:
ctx.fill();
ctx.stroke();
DO:
ctx.save();
ctx.clip();
ctx.lineWidth *= 2;
ctx.fill();
ctx.stroke();
ctx.restore();
Edit
For me I believe this works because the clip method removes any fill and stroke around the already present fill area, meaning the only place the stroke can go is on the inside because else it would be clipped off.
The default stroke do use centered stroke but there is unfortunately no parameter to control the alignment of the stroke so you would either have to calculate an offset value for the rectangle's position and size, or combine two rectangles and use for example the fill-rule evenodd:
var ctx = c.getContext("2d");
// default centered
ctx.lineWidth = 10;
ctx.strokeRect(10, 10, 100, 100);
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(10, 10, 100, 100); // show main path
// inner
ctx.rect(150, 10, 100, 100);
ctx.rect(150+10, 10+10, 100-20, 100-20); // offset position and size
ctx.fill("evenodd"); // !important
ctx.strokeRect(150, 10, 100, 100);
<canvas id=c></canvas>
This answer "Draw outer and inner border around any canvas shape" shows how to use masking and compositing to precisely control the offset, both inwards and outwards of a stroke without the need to manipulate paths. It can be used for any canvas path no matter how complex.
I am having difficulties with setting the correct width and height of my canvas element.
I have a ball, that I'd like to bounce back whenever it hits a screen boundary by changing it's vertical velocity. It works, but instead of moving back as soon as it hits the edge of the screen, it goes on for a couple of seconds and THEN moves back. I have these variables to determine the viewport's size:
var left = 0,
right = canvas.width,
top = 0,
bottom = canvas.height;
If my ball's x or y positions are outside these boundaries, the velocity should be changed to a negative one. However, during my animation I console.log it's x position and by the time it reaches the right edge of the screen the value is around 600, which is really strange, since I'm on a 1366x768px monitor.
Also, it doesnt't fully reach the left screen edge, but bounces off like 50px from it.
Any ideas are really appreciated, because I've been stuck on this for quite some time.
You can see a working example here: http://codepen.io/gbnikolov/pen/puiwk
Update your draw to the following.
Ball.prototype.draw = function(ctx) {
ctx.save();
// you've translated to the x and y position of the ball.
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.scale(this.scaleX, this.scaleY);
ctx.lineWidth = this.lineWidth;
ctx.fillStyle = this.color;
ctx.strokeStyle = this.strokeColor;
ctx.beginPath();
// Draw at 0,0 since we are already translated to the x and y.
ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}
Live Demo
Your problem is in the draw method, you're translating the context and then making the arc at the x and y of the ball so if you translate to 20, 20 for example and then draw at 20,20 your ball is actually at 40,40.
I can't find out how to get actual drawing cursor position after moveTo(). Check out my code:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 20);
// here i want to get from "ctx" actual offset
ctx.lineTo(20,30);
ctx.closePath();
Is there any way or I have to store offset in my own variables offsetX, offsetY ?
I assume you mean you have a bunch of relative path commands and you want to move them.
For instance, to draw a triangle at the top-left you would write:
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,0);
ctx.lineTo(50,100);
ctx.closePath(); // makes the last line for you
ctx.stroke();
So what if you want to use the same path but draw the triangle starting at (175, 175) instead? Instead of changing your moveTo and all subsequent drawing command, all you have to do is translate the context.
ctx.save();
ctx.translate(175, 175);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,0);
ctx.lineTo(50,100);
ctx.closePath(); // makes the last line for you
ctx.stroke();
// save/restore lets you undo the translation so the next object starts at (0,0)
// you could just call ctx.translate(-175, -175); at the end instead though
ctx.restore();
Translating the context changes the origin of the drawing surface, and allows you to move all of your coordinates (temporarily or not) with it. This means you can define a bunch of paths and redraw them using the same commands all over the place using ctx.translate.
See both triangles here:
http://jsfiddle.net/qzYFC/
I'm wonder how you would go about and create a shape similar to this one below in HTML5 Canvas. It's more or less a cropped circle I guess, though my need would render it a synch different.
http://img826.imageshack.us/img826/5198/98359410.jpg
context.fillStyle = "#000";
context.beginPath();
context.arc(200,200,100,0,Math.PI*2,true);
context.closePath();
context.fill();
Now to crop the booger, I'm perplexed. Could anyone lend me a hand? Thanks!
context.globalCompositeOperation = 'destination-in';
context.fillRect(200, 220, 200, 100); //Or something similar
destination-in means, per MDC: The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.
Or conversly
context.fillRect(200, 220, 200, 100);
context.globalCompositeOperation = 'source-in';
//Draw arc...
source-in means: The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent
Both these methods will end up disrupting other content already drawn to canvas, if this is an issue, use clip
context.save();
context.beginPath();
//Draw rectangular path
context.moveTo(200, 220);
context.lineTo(400, 220);
context.lineTo(400, 320);
context.lineTo(200, 320);
context.lineTo(200, 220);
//Use current path as clipping region
context.clip();
//Draw arc...
//Restore original clipping region, likely the full canvas area
context.restore()