<!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>
Related
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>
I'm trying to implement zooming and panning a canvas which contains a picture.
I found this example http://phrogz.net/tmp/canvas_zoom_to_cursor.html, but the transformations are applied on the picture withing the canvas, not on the canvas itself.
I don't understand the code completely, so I didn't manage to customize it for my needs.
Can someone help me with that?
Or, if you could recommend me some good library suitable for my needs, that would be great.
Thanks.
Check out the transformation methods available on the context object.
Context.scale will allow you to scale your content.
Context.translate will allow you to offset the drawing of your content to create your panning effect.
If you want 2 overlaying canvases to maintain their aspect ratio then you would scale & translate both canvases by the same amount.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/H6UMN/
<!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; }
#wrapper{position:relative;}
canvas{position:absolute; border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
var cw=canvas.width;
var ch=canvas.height;
var scaleFactor=1.00;
var panX=0;
var panY=0;
var circleX=150;
var circleY=150;
var radius=15;
drawTranslated();
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#scaledown").click(function(){ scaleFactor/=1.1; drawTranslated(); });
$("#scaleup").click(function(){ scaleFactor*=1.1; drawTranslated(); });
$("#panleft").click(function(){ panX-=10; drawTranslated(); });
$("#panright").click(function(){ panX+=10; drawTranslated(); });
function drawTranslated(){
ctx.clearRect(0,0,cw,ch);
ctx.save();
ctx.translate(panX,panY);
ctx.scale(scaleFactor,scaleFactor);
ctx.beginPath();
ctx.rect(circleX-radius,circleY-radius,radius*2,radius*2);
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();
ctx.restore();
ctx1.clearRect(0,0,cw,ch);
ctx1.save();
ctx1.translate(panX,panY);
ctx1.scale(scaleFactor,scaleFactor);
ctx1.beginPath();
ctx1.arc(circleX,circleY,radius,0,Math.PI*2);
ctx1.closePath();
ctx1.fillStyle="red";
ctx1.fill();
ctx1.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<button id=scaledown>Scale Down</button>
<button id=scaleup>Scale Up</button>
<button id=panleft>Pan Left</button>
<button id=panright>Pan Right</button><br>
<div id=wrapper>
<canvas id="canvas" width=350 height=300></canvas>
<canvas id="canvas1" width=350 height=300></canvas>
</div>
</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>
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>
How can I display whole image in circulr shape using Javascript or HTML5. I tried the code below but with this code only part of the image will be converted into circular shape. How can I make the whole display in circular shape?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script type="text/javascript" >
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<div id="myCanvas"></div>
<script>
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.arc(100,100, 50, 0, Math.PI*2,true); // you can use any shape
ctx.clip();
var img = new Image();
img.addEventListener('load', function(e) {
ctx.drawImage(this, 0, 0, 200, 300);
}, true);
img.src="images/hospital_review_profile_placeholder.png";
</script>
</body>
</html>
Instead of using ctx.clip(), you would resize and reposition your image to fit in your circle.
Here is code that will resize your image to its largest size that will fit in the circle.
Then the code positions the resized image properly in the circle.
Here is a Fiddle --- http://jsfiddle.net/m1erickson/s6MzZ/
<!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 radius=50; // circle radius
var fullWidth=200; // actual width of image in pixels
var fullHeight=300; // actual height of image in pixels
var centerX=100; // center X coordinate of the circle
var centerY=100; // center Y coordinate of the Circle
// the image must be resized to fit into the circle
// Call CalcResizedImageDimensions() to get the resized width/height
var size=CalcResizedImageDimensions(radius,fullWidth,fullHeight);
var rectX=centerX-size.width/2; // the X coordinate of the resized rectangle
var rectY=centerY-size.height/2 // the Y coordinate of the resized rectangle
ctx.beginPath();
ctx.arc(centerX,centerY,radius,0,Math.PI*2,true);
// I illustrate with just a rectangle
// you would drawImage() instead
ctx.rect(rectX,rectY,size.width,size.height);
ctx.stroke();
function CalcResizedImageDimensions(r,w,h){
var d=2*r;
var newH=(d*h)/Math.sqrt(w*w+h*h);
var newW=w/h*newH;
return({width:newW,height:newH});
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
</body>
</html>