I am trying to understand why my circle is not in the middle of my Canvas in HTML 5.
I am trying to create a circle in the middle the canvas.
The canvas is as follows:
Canvas:
Width: 600
Height: 300
Then I draw a circle with the following code:
context.beginPath();
context.fillStyle = '#424';
context.arc(300, 150, 10, 0, 2*Math.PI, false);
context.fill();
context.closePath();
The circle is drawn inthe lower right corner.
Now if I change the (x, y) to (150, 75) then it shows in the middle.
I am just hoping someone can shed a little light on why the original code doesn't work.
You are not showing how you are setting the actual width and height of the canvas, but if the center point always is 150, 75 then the canvas is always at default size which means you are probably setting the size using css instead of directly on the element.
Try something like this:
<canvas id="myCanvas" width=600 height=300></canvas>
in JavaScript:
canvas.width = 600; // don't use canvas.style.*
canvas.height = 300;
You could also set the center this way for the arc (to make it adopt center automatically):
context.arc(context.canvas.width * 0.5, context.canvas.height * 0.5,
10, 0, 2*Math.PI, false);
Related
I want to cut transparent circle from canvas rectangle which have transparency set to rgba(0,0,0,0.7). When I'm trying to cut the circle then figure path inside is grayed. Canvas is over the picture.
Expected behaviour attached.
Grayed circle figure:
Expected circle:
My JS code:
context.save()
context.fillStyle = "rgba(0,0,0,0.7)"
context.fillRect(0,0, 700, 100)
context.save()
context.globalCompositeOperation= "destination-out"
context.beginPath()
context.arc(400,100, 100, 0, 2 * Math.PI, false)
context.fill()
context.restore()
my problem is that i can't switch to a mouse pointer when it is near the circle or directly above it. The mouse should be normal when it is not near or above the circle. In addition, I want you to be able to pull from the circle and the stretch to act as a rubber band.
Edit; I want to move the line in the center with clicking to the circle in the middle. The code is shown above
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// den gule
ctx.fillStyle = "rgb(255,255,0)";
ctx.fillRect(27, 50, 450, 430);
// den rød firkekant
ctx.fillStyle = "rgb(249,35,2)";
ctx.fillRect(170, 180, 160, 130);
// strekken
ctx.beginPath();
ctx.moveTo(170, 245);
ctx.lineTo(330, 245);
ctx.stroke();
// sirkel
ctx.beginPath();
ctx.arc(250, 245, 4, 0, 2 * Math.PI);
ctx.stroke();
<!DOCTYPE html>
<html>
<title>Strikk oppgave</title>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;"></canvas>
</body>
</html>
I want to move the line in the center with clicking to the circle in the middle. The code is shown above
After looking around at a lot of documentation, I found it easy to find articles on changing the cursor type based on scroll position. Consider this jQuery:
$("body").mousemove(function(e){
if (e.pageX > 250 && e.pageY > 240 && e.pageX < 270 && e.pageY < 260)
$("body").css("cursor", "pointer");
else
$("body").css("cursor", "default");
});
However, finding the part on resizing the circle on a mouse drag is much harder. You could use a Konva.js circle instead of a canvas arc, as you'll see on one of the three recommended links I have below:
Is there a way to resize a circle by dragging the circumference outward / inward using Konva js?
how to drag and resize canvas rectangle using cursor types
HTML Canvas draw a circle on mouse click and drag it untill the required radius is obtained
You'll just have to modify the code in these links according to your needs, as this is all I was able to really come up with.
i want to draw a simple path in canvas like this:
i have allready tried (also im not sure how to create the point with a radius at 440, 400):
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 0);
ctx.lineTo(440, 400);
ctx.lineTo(0, 500);
ctx.lineTo(0, 0);
ctx.fill();
but it shows me just a black 600x600 rectangle
https://jsfiddle.net/aaroniker/pmgkymch/
Thanks!
Canvas elements contain rasterized pixel data for an image of the same dimensions as those of the canvas element's width and height attributes, which default to 300 and 150 respectively. Drawing to a canvas element uses pixel coordinates of the canvas unless a context drawing transform is in effect.
Setting width and height of a canvas element in CSS scales the canvas to the dimensions set in CSS when presenting it on screen. As with scaling an ordinary image element, canvas image quality can drop noticeably if a small canvas is scaled to too large a size.
Answer A
You are seeing a black square because you drew onto a 300 x 150 pixel canvas using 600 x 600 coordinates. Filling the oversized path drawn filled in all the actual canvas pixels. The 300 x 150 pixel canvas was presented as a 600 x 600 screen area due to CSS scaling.
Answer B
The context's path drawing arcto method is used to create a rounded corner but you don't need to work out where it leaves the drawing position provided you continue by drawing a line to a known point.
In this example I've set the canvas element dimensions in HTML to 600 x 600, and scaled it to a different size (150px x 150px) in CSS
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var radius = 100; // a number
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 0);
ctx.arcTo( 440, 400, 0, 500, radius)
ctx.lineTo( 0, 500); // join end of arc to next point
ctx.lineTo(0, 0);
ctx.fill();
}
}
draw();
#canvas {
width: 150px;
height: 150px;
}
<canvas id="canvas" width="600", height="600"></canvas>
As I stated in my comment, the coordinate system gets deformed when you define canvas dimensions in CSS. Use either inline styling (as I've done) or code it into your JS. For the arc you need, use ctx.arcTo(x1, x2, y1, y2, r), where x1, y1 is the point you are arcing around (440, 400 in your case) and x2,y2 is where you want the arc to meet back up with your figure, r is the radius.
https://www.w3schools.com/tags/canvas_arcto.asp
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 0);
ctx.lineTo(441.2, 392);
ctx.arcTo(440, 400, 431.2, 402, 8);
ctx.lineTo(0, 500);
ctx.lineTo(0, 0);
ctx.fillStyle = "#008AFF";
ctx.fill();
}
}
draw();
<canvas height="600" id="canvas" width="600"></canvas>
I need to create a circle mask with canvas, I'm trying to do that, but I can't get it.
I knew to do that with Flash, but I prefef to do without that technology:
May anybody help me with this? I don't know too much about javascript
What I need is create three circles with different sizes on a picture (Canvas with background color).
I know that you are not here to do the job of others but however much I tried I hace not gotten...
You can add as many circles as you need, you must only indicate the position and the desired radius:
JavaScript:
var context = document.getElementById('canvas').getContext('2d');
// Color of the "mask"
context.fillStyle = '#000';
// Rectangle with the proportions of the image (600x400)
context.fillRect(0,0,600,400);
/**
* #param x Specifies the x-coordinate
* #param y Specifies the y-coordinate
* #param radius Specifies radius of the circle
*/
var clearCircle = function(x, y, radius){
context.save();
context.globalCompositeOperation = 'destination-out';
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fill();
context.restore();
};
// First circle
clearCircle(155, 190, 50);
// Second circle
clearCircle(300, 190, 70);
// Third circle
clearCircle(440, 200, 60);
HTML:
<canvas id="canvas" width="600" height="400" />
CSS:
canvas{
background: url("http://cdn2.epictimes.com/derrickblair/wp-content/uploads/sites/9/2015/01/happy-people.jpg") no-repeat;
}
You can see this in action here: http://jsfiddle.net/tomloprod/szau09x6/
Related links:
You should read more about canvas here: http://www.w3schools.com/html/html5_canvas.asp
I am drawing a cirlce on canvas who's center points are the middle points of the canvas so the circle should start from the center of the page and its radius should be from 1/2 of the screen to 3/4th. I have figured out the way to make the canvas resize itself according to the window size, but i cant get the cirlce to resize automatically. also that i cant figure out the radius to make it look like a cirlce with my specifications, currently it looks like an stretched circle. What value should i give to my radius to make it look like a normal circle again. also it should be able to resize it self on window resize?
currently i have the following values:
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var myRadius = canvas.width / 4;
context.arc(centerX, centerY, myRadius, 0, (Math.PI/180) * 360 , false);
context.fillStyle = 'green';
context.fill()
}
You should handle resize events and redraw the circle for the new canvas dimensions.
If you will resize your canvas using styles circle will redraws as you expect: fiddle (actually whole canvas will act as just an image: try to change dimensions of canvas from 1000 to 100 and you'll see what I mean)
css:
#canvas {
height: 100%;
width: 100%
}
html:
<canvas id="canvas" height="1000" width="1000"></canvas>