I am trying to alter an image by highlighting an area defined by coordinates.
I've been using two canvases, on top of each other. Now I don't know if this is the best way to do it in the first place. http://jsfiddle.net/9wJu8/
<canvas id='canvas'>Your browser does not support HTML5 canvas</canvas>
<canvas id='canvas2'>Your browser does not support HTML5 canvas</canvas>
Currently, I am using two images, but I wonder if there is any way to use masks on canvas.
Second of all, I'd like to save the output of the stacked canvases.
What #Ken said but I think some of his code example was accidentally omitted:
A Demo: http://jsfiddle.net/m1erickson/Spkhz/
<!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=700;
var ch=438;
var img=new Image();
img.onload=start;
img.src="cat.jpg";
function start(){
canvas.width=cw;
canvas.height=ch;
// draw the image on the canvas
ctx.drawImage(img,0,0,cw,ch);
// darken the image with a 50% black fill
ctx.save();
ctx.globalAlpha=.50;
ctx.fillStyle="black";
ctx.fillRect(0,0,cw,ch);
ctx.restore();
// ctx.clip() the area to highlight
// and redraw the whole image
// (the image will draw only in the clipping region)
ctx.save();
ctx.beginPath();
ctx.clearRect(300,100,200,100);
ctx.rect(300,100,200,100);
ctx.clip();
ctx.drawImage(img,0,0,cw,ch);
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
You can use a single canvas for this:
➔ Draw complete image
➔ Draw a transparent black rectangle on top
➔ Use drawImage() with clipping settings
For example:
// draw full image
ctx.drawImage(img, 0, 0);
// cover with a darkened overlay
ctx.fillStyle = 'rgba(0,0,0, 0.5);
ctx.fillRect(0, 0, canvas.width, canvas.height);
// draw region of image
ctx.drawImage(img, x, y, w, h, x, y, w, h);
where x, y, w and h is the region you want to highlight.
To save out as an image just use toDataURL() on the canvas element.
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 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 make the next thing (I tried to do it via css: http://jsfiddle.net/kyfha/74/ but the users suggested me to do it via canvas). so I tried via canvas:
when the user overs all this shape, it will be changed to:
when the user overs out this shape, it will be changed to the image number 1.
if, in image number 2, he presses the small gray circle, the image will be changed to:
if he presses the small lightblue circle, it will be changed to image number 2.
I tried to make it via canvas, javascript and css and I got the shapes.
what I have to do is to put a lightBlue circle in the middle of the gray shape (it will be always there) and put a small green circle in the end of the blue shape.
the blue shape can be more longer, smaller or to the left side.
for example:
In addition, when the user presses the small circles, I have to put a line in the pressed small circle (for example, image 2 and 3).
I defined to canvas: canvas (the gray shape) and canvas2 (the blue shape inside the gray shape).
this is my jsfiddle:
http://jsfiddle.net/Ht6Ym/2250/
this is my html:
<div>
<canvas id="myCanvas" width="578" height="250" style="position: absolute;">
</canvas>
<canvas id="myCanvas2" width="578" height="250" style="position: absolute;">
</canvas>
</div>
Hello
Bye
any help appreciated!!
I'm not quite sure why, but I was intrigued with your design, So................
Here's some help drawing your canvas shapes entirely within canvas.
Demo: http://jsfiddle.net/m1erickson/c4upM/
To make any shape clickable, check out context.isPointInPath to do hit-testing. I leave the interactivity up to you.
Good luck with your project!
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 ctx=canvas.getContext("2d");
var cx=150;
var cy=100;
var radius=75;
var linewidth=15;
var PI=Math.PI;
roundRect("Bye");
grayArc("gray");
blueArc("blue",PI*1.25,PI*1.5);
circleInArc("skyblue",PI*1.5);
lineThruArc("skyblue",PI*1.5);
circleInArc("lightgray",PI*1.25);
lineThruArc("lightgray",PI*1.25);
cy+=150;
lightblueCircle("Hello");
grayArc("gray");
blueArc("blue",PI*1.25,PI*1.5);
circleInArc("skyblue",PI*1.5);
lineThruArc("skyblue",PI*1.5);
circleInArc("lightgray",PI*1.25);
lineThruArc("lightgray",PI*1.25);
function grayArc(strokeColor){
ctx.beginPath();
ctx.arc(cx,cy,radius,Math.PI,Math.PI*2);
ctx.lineWidth=linewidth;
ctx.strokeStyle=strokeColor;
ctx.stroke();
}
function blueArc(strokeColor,radianStart,radianEnd){
ctx.beginPath();
ctx.arc(cx,cy,radius,radianStart,radianEnd);
ctx.lineWidth=linewidth;
ctx.strokeStyle=strokeColor;
ctx.stroke();
}
function circleInArc(fillColor,radianAngle){
var x=cx+radius*Math.cos(radianAngle);
var y=cy+radius*Math.sin(radianAngle);
ctx.beginPath();
ctx.arc(x,y,linewidth/2,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=fillColor;
ctx.fill();
}
function lineThruArc(strokeColor,radianAngle){
var length=40;
var x1=cx+(radius-length/2)*Math.cos(radianAngle);
var y1=cy+(radius-length/2)*Math.sin(radianAngle);
var x2=cx+(radius+length/2)*Math.cos(radianAngle);
var y2=cy+(radius+length/2)*Math.sin(radianAngle);
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.strokeStyle=strokeColor;
ctx.lineWidth=2;
ctx.stroke();
}
function lightblueCircle(text){
ctx.beginPath();
ctx.arc(cx,cy,radius-25,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.fillStyle="white";
ctx.font="18px verdana";
var halfWidth=ctx.measureText(text).width/2
ctx.fillText(text,cx-halfWidth,cy);
}
function roundRect(text){
var x=cx-radius+20;
var y=cy-25-5;
var width=radius*2-40;
var height=radius*.66;
var cornerRadius=15;
ctx.beginPath();
ctx.moveTo(x+cornerRadius,y);
ctx.lineTo(x+width-cornerRadius,y);
ctx.quadraticCurveTo(x+width,y,x+width,y+cornerRadius);
ctx.lineTo(x+width,y+height-cornerRadius);
ctx.quadraticCurveTo(x+width,y+height,x+width-cornerRadius,y+height);
ctx.lineTo(x+cornerRadius,y+height);
ctx.quadraticCurveTo(x,y+height,x,y+height-cornerRadius);
ctx.lineTo(x,y+cornerRadius);
ctx.quadraticCurveTo(x,y,x+cornerRadius,y);
ctx.closePath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.fillStyle="white";
ctx.font="18px verdana";
var halfWidth=ctx.measureText(text).width/2
ctx.fillText(text,cx-halfWidth,cy);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=325></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>