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>
Related
<!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>
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>
I have an image which is 1836 x 3264 I want to drawImage() to canvas and resize to 739 x 1162.
After reading the documentation I thought this could be accomplished with the following:
ctx.drawImage(image, 0, 0, 739, 1162);
I have also tried:
ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);
Both show only a small part of the full image instead of shrinking it down.
How do I pass through the values to resize from 1836 x 3264 -> 739 x 1162 ?
What you have looks correct, so you might double-check for a typo somewhere.
[additional thought: Is your image really 1836x3264 and not 3264x1836.]
Here is working code and a Fiddle: http://jsfiddle.net/m1erickson/MLGr4/
<!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");
img=new Image();
img.onload=function(){
canvas.width=400;
canvas.height=300;
ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300);
}
img.src="http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg";
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=100 height=100></canvas>
</body>
</html>