I am trying to draw an arc within a canvas and i want to make that arc to fill the canvas.
i tried to make the arc half canvas's size and i works perfectly but when i increase the radius to be same width as the canvas i find an error...as for arc width its good but for the height it increases alot, disappears and i feel like radius is doubling the y-axis.
and when i check it in jsFiddle it works perfectly...maybe i have to do with some css or something?
var canvas = document.getElementById("canvas2");
var context = canvas.getContext("2d");
var counterClockwise = false;
var x = canvas.width /2;
var y = canvas.height /2;
context.beginPath();
context.arc(x, y, x-9, 0, 2*Math.PI);
context.stroke();
and this the html body:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/font-awesome.css" />
</head>
<body>
<canvas id="canvas2" style="width:207px;height:207px"></canvas>
</body>
</html>
Set the width and height on the canvas element itself, not in CSS:
canvas.width=207;
canvas.height=207;
Setting width and height in css will distort your drawings (as you've discovered).
Also, when you draw an arc which you intend to be a circle, be sure to call context.closePath();
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/adGfS/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas = document.getElementById("canvas2");
var context = canvas.getContext("2d");
canvas.width=207;
canvas.height=207;
var x = canvas2.width /2;
var y = canvas2.height /2;
context.beginPath();
context.arc(x, y, x-9, 0, 2*Math.PI);
context.closePath();
context.stroke();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas2"></canvas>
</body>
</html>
Related
I want to rotate the HTML5 canvas text with dynamic X, Y value from it's center position. I used the below code as mentioned in the stackoverflow link HTML5 rotate text around it's centre point . but text is always rotating from start point. I need from center point rotation. This is my code.
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.translate(options.x , options.y);
this.ctx.rotate(options.labelRotation * Math.PI / 180);
this.ctx.fillText(label, 0, 0);
Anyone let me know how to rotate the text from center point of the text.
Thanks,
Bharathiraja.
Your code is working: http://jsfiddle.net/m1erickson/d40xr8nL/
If its not working on your end:
be sure your options properties are valid.
wrap the code in ctx.save & ctx.restore (because transforms are cumulative).
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var x=150;
var y=150;
var labelRotation=45;
var label="This is some text.";
animate();
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
//
ctx.beginPath();
ctx.arc(x,y,3,0,Math.PI*2);
ctx.closePath();
ctx.fill();
//
ctx.save();
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.translate(x , y);
ctx.rotate(labelRotation * Math.PI / 180);
ctx.fillText(label, 0, 0);
ctx.restore();
}
function animate(){
requestAnimationFrame(animate);
labelRotation++;
draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I'm having some trouble rotating a piece of text in my canvas by it's centre point, here is my code to attempt my problem
var textPositions = context.measureText(this.Text);
context.save();
context.translate(this.XPos + (textPositions.width / 2), this.YPos);
context.rotate( (Math.PI / 180) * this.RotateSpeed );
context.font = this.FontSize + "px " + this.FontStyle;
context.fillText(this.Text, 0, 0);
context.translate(-(this.XPos + (textPositions.width / 2)), -(this.YPos));
context.restore();
this.Text is just "Hello world!"
this.XPos = 65;
this.YPos = 100,
Here is a picture with the non-rotated text and rotated text,
Am I working out the centre point wrong?
Here's one way:
Use textAlign & textBaseline to draw the text at it's horizontal and vertical center:
translate to the x,y where you want the text centered.
rotate by the desired angle
And finally fillText
Example code and a Demo: http://jsfiddle.net/m1erickson/uL62et9y/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.beginPath();
ctx.moveTo(cw/2,0);
ctx.lineTo(cw/2,ch);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,ch/2);
ctx.lineTo(cw,ch/2);
ctx.stroke();
ctx.save();
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.translate(150,150);
ctx.rotate(Math.PI/2);
ctx.fillText("Hello World!",0,0);
ctx.restore();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="450" style="border:1px solid #d3d3d3; background-color:#999999;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
<!--normal canvas code-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
<!--code for the text line-->
ctx.font = "42px Arial";
<!--place the words in mid x position and in upper 1/6 of y position-->
var canvasxposition = (c.width/2)-(ctx.fillText.x/2)
var canvasyposition = c.height/6
ctx.fillText("Hello World",canvasxposition,canvasyposition);
</script>
</body>
</html>
I am using a canvas and it will be later used for an image.
I need to align the text in the middle of x position and in top y position (1/6 of total height should be the y position)
I used the above code and found out that the following line has a problem.
I need to know what is wrong with it. I want to see the middle(y axis) of the text, in the middle (y axis) of the canvas.
var canvasxposition = (c.width/2)-(ctx.fillText.x/2)
You can align text from its own horizontal centerpoint using context.textAlign
You can align text from its own vertical centerpoint using context.textBaseline:
// align text from horizontal and vertical centerpoint of text
ctx.textAlign="center";
ctx.textBaseline="middle";
Example code and a Demo: http://jsfiddle.net/m1erickson/nT37D/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// get references to canvas and context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// crosshairs
ctx.beginPath();
ctx.moveTo(0,canvas.height/6);
ctx.lineTo(canvas.width,canvas.height/6);
ctx.moveTo(canvas.width/2,0);
ctx.lineTo(canvas.width/2,canvas.height);
ctx.stroke();
// align text from horizontal and vertical centerpoint of text
ctx.textAlign="center";
ctx.textBaseline="middle";
// sample text
ctx.font="18px arial";
ctx.fillText("Hello World",canvas.width/2,canvas.height/6);
}); // end $(function(){});
</script>
</head>
<body>
<h4>Align text from horizontal and vertical centerpoint of text</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I am trying to create a rectangle which will fade on top of an image that is being clipped dynamically.
However any instance of creating a rectangle goes behind the drawn image, and I can't seem to figure out how to place it on top so both the shape and image become clipped.
Here is a Fiddle of where I am currently: JSFiddle
Here is my html:
<div id='demo'>
<canvas id="canvas" width="200px" height="200px"></canvas>
<img id="img" src="http://www.filterforge.com/more/help/images/size200.jpg" />
</div>
Here is my javascript:
function init(){
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var r = 1;
function draw(){
c.beginPath();
c.arc(100,100,r,0,2*Math.PI,false);
r = r + 1;
// Start Image
c.save();
c.clip();
var img = document.getElementById('img');
c.drawImage(img,0,0);
c.restore();
// The Rectangle I am also trying to mask
c.fillStyle = "rgba(0,0,0,0.025)"
c.fillRect(0, 0, 200, 200);
c.save();
c.clip();
c.restore();
if(r < 100){
requestAnimationFrame(draw);
}
r++;
}
requestAnimationFrame(draw);
}
init();
I would appreciate any help you guys can offer.
Thanks,
Here's the order you want for your clipping:
context.save
define the clipping region (eg your arc)
drawImage
context.restore
Demo: http://jsfiddle.net/m1erickson/YS45U/
Code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var r = 0;
var img=new Image();
img.onload=function(){
draw();
};
img.src="http://www.filterforge.com/more/help/images/size200.jpg";
function draw(){
// request another animation if not 100%
if(++r<100){
requestAnimationFrame(draw);
}
// save the unclipped context
c.save();
// set the clipping region
c.beginPath();
c.arc(100,100,r,0,2*Math.PI,false);
c.closePath();
c.clip();
// draw the image into the clipped region
c.drawImage(img,0,0);
// restore the canvas context
c.restore();
}
$("#stop").click(function(){});
}); // end $(function(){});
</script>
</head>
<body>
<button id="stop">Stop</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I am drawing a circle onto my html5 canvas like below:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = '#000000';
context.stroke();
</script>
</body>
</html>
On my website I have a series of images on the left of the canvas that the user clicks and it adds the image to the canvas and is draggable. I am using KineticJS to achieve this portion. I need help understanding how to be able to click the image and it adds the image to the bounds of the circle and only moves along the circle. On the KineticJS website they have a feature that allows the user to drag in a circular motion. I do not want to use this as it simply constrains it to the whole circle and i would like it to go around the border of the circle.
below is the image of what i'm asking:
circular drag http://www.papiobeads.com/images/theimage.png
You can use canvas transformations to rotate your image around the circumference of your circle.
Move to your desired rotation point (the center of your circle)
Set your desired rotation angle (in radians)
Draw the image
Here's example code and a Demo: http://jsfiddle.net/m1erickson/t5N9T/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var radianAngle=0;
var cx=150;
var cy=150;
var radius=50;
var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cars.png";
function start(){
animate();
}
function animate() {
requestAnimationFrame(animate);
// Drawing code goes here
radianAngle+=Math.PI/120;
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw the circle
ctx.beginPath();
ctx.arc(cx,cy,radius,0,Math.PI*2);
ctx.closePath();
ctx.stroke();
// draw the image rotated around the circumference
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(radianAngle);
ctx.drawImage(img,radius-img.width/2,-img.height/2);
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=350 height=350></canvas>
</body>
</html>