Can you please take a look at This Demo and let me know how I can set the beginning of the canvas from 0,0 to 500,1200? For example if I have a Point with coordinates of 583 , 1642
then be able to add the point as:
ctx.arc(583, 1642, 5, 0, Math.PI * 2, true);
$("#draw").on("click", function () {
var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(0, 0, 5, 0, Math.PI * 2, true);
ctx.arc(75, 75, 5, 0, Math.PI * 2, true);
ctx.arc(300, 300, 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
});
Thanks,
You can use translate to shift the coordinate system. Just shift it the opposite direction, for example:
ctx.translate(-500, -1200);
Now when you draw something at 583, 1642 it will show up at 83, 442 relative to the view-port.
To reset just transform back or initialize with an identity matrix:
ctx.setTransform(1, 0, 0, 1, 0, 0);
Modified fiddle
Related
This question already has answers here:
fillRect() not overlapping exactly when float numbers are used
(2 answers)
Closed 3 years ago.
This is a comprehension question only.
I fill a black circle.
I fill a white circle exactly over it.
I would have expected to see nothing, but yet I see a very thin black circle. Why ? What happens ?
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle="black";
ctx.arc(50, 50, 20, 0, Math.PI * 2, true);
ctx.fill();
ctx.fillStyle="white";
ctx.arc(50, 50, 20, 0, Math.PI * 2, true);
ctx.fill();
https://jsfiddle.net/a4fuLbgk/1/
You can solve this problem by painting the stroke as well.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle="black";
ctx.arc(50, 50, 20, 0, Math.PI * 2, true);
ctx.fill();
ctx.fillStyle="white";
ctx.strokeStyle="white"
ctx.arc(50, 50, 20, 0, Math.PI * 2, true);
ctx.stroke()
ctx.fill();
So I have tried clipping an image using ctx.clip and ctx.arc like this:
ctx.beginPath();
ctx.arc(250, 250, 250, -Math.PI / 4, Math.PI / 4);
ctx.clip();
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
As you see I have set the start angle to -45 deg and the end angle to 45 deg, but what I get is a cut of circle/half moon, not a pac-man figure, as you would see if you filled the arc using ctx.fill.
FIDDLE
Why is this and how do I fix it?
Thanks in advance.
Not knowing anything about HTML5 or JavaScript, I think you are just not closing the path properly. Add ctx.lineTo(250,250); after the arc: http://jsfiddle.net/7em21gvk/
Okay, so I found the problem, simply add ctx.moveTo(x, y) where x and y is the center of the arc, like this:
ctx.beginPath();
ctx.moveTo(250, 250);
ctx.arc(250, 250, 250, -Math.PI / 4, Math.PI / 4);
ctx.clip();
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
FIDDLE
The arc have the following result. Do I have to calculate the start point of the arc myself? jsfiddle link here: jsfiddle link here
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
context.beginPath();
context.strokeStyle = "#FF0000";
context.lineWidth = 1;
// context.moveTo(49, 49);
context.arc(19, 19, 15, 0, 1 * Math.PI);
context.moveTo(49, 49);
context.arc(49, 49, 15, 0, 1 * Math.PI);
context.stroke();
You need to close the path each time:
http://jsfiddle.net/8EDHb/1/
context.beginPath();
context.arc(19, 19, 15, 0, 1 * Math.PI);
context.stroke();
context.closePath();
context.moveTo(49, 49);
context.beginPath();
context.arc(49, 49, 15, 0, 1 * Math.PI);
context.stroke();
context.closePath();
If you want a complete circle you should use 2 * Math.PI.
You can make javascript calculate the starting position, for a circle with center (cx,cy) and radius r.
Use context.arc(cx + r,cy) and so on
If you have definite values,
Eg. Centre at 100,100 and radius 50 use
context.arc(150,100,...)
I am trying to color the following line, but my canvas either colors all the lines or does not color at all. Any help would be appreciated
canvas.save();
canvas.scale(1, 0.75);
canvas.beginPath();
canvas.arc(100, 95, 8, 0, Math.PI * 2, false);
canvas.stroke();
canvas.strokeStyle= "red";
canvas.closePath();
canvas.restore();
You are using canvas, I assume you mean context.
canvas=getElementById("mycanvas");
context.getContext("2d");
A few points:
1. Start 1 or more draws with context.beginPath();
2. When you tell the context to context.stroke(), it will use the last strokeStyle you set (previous strokeStyles are ignored)
3. always to context.stroke() to physically apply your drawn lines,arcs,etc to the canvas.
// draw a red circle
context.beginPath();
context.arc(100, 95, 8, 0, Math.PI * 2, false);
context.strokeStyle="red";
context.stroke();
//then begin a new path and draw a blue circle
context.beginPath();
context.arc(150, 95, 8, 0, Math.PI * 2, false);
context.strokeStyle="blue";
context.stroke();
I have this triangle that I have rounded corners on but I'm using the arcTo:
context.moveTo(140, 0);
context.arcTo(180, 100, 100, 100, 4);
context.arcTo(100, 100, 140, 0, 4);
context.arcTo(140, 0, 180, 100, 4);
As you will see the top angle looks a bit messed up. Any ideas how to fix it? Seems like there needs to be some calculations for the initial moveTo(x, y) but 140, 0 is where it should start.
I just got rid of the moveTo and arced them to eachother. Started the first part at 174, 176 (180-4 radius) works but 174 had no overlap at all.
Live Demo
var canvas = document.getElementsByTagName("canvas")[0],
ctx = canvas.getContext("2d");
canvas.width = canvas.height = 400;
ctx.beginPath();
ctx.arcTo(174, 100, 100, 100, 4);
ctx.arcTo(100, 100, 140, 0, 4);
ctx.arcTo(140, 0, 180, 100, 4);
ctx.arcTo(180, 100, 100, 100, 4);
ctx.stroke();
Here is what I came up with:
var r = 8;
var offset = (6 * r / 4) - 1;
context.arcTo((180 - offset), 100, 100, 100, r);
context.arcTo(100, 100, 140, 0, r);
context.arcTo(140, 0, 180, 100, r);
context.arcTo(180, 100, 100, 100, r);
Using part of what Loktar provided, I've modified it slightly to use a ratio of what I know works for a given diameter, and used this as the offset. With a diameter of 4, I know 6 works.
Seems like there should be a better way but I'm happy with this.