This is the HTML code:
<body >
<canvas id ="my_canvas" width =500 height =500></canvas>
</body >
This is my JavaScript code:
var canvas = document.getElememtById("my_canvas");
var c=canvas.getContext("2d");
c.beginPath();
c.moveTo(100,200);
c.lineTo(200,200);
c.fill();
c.stroke();
c.endPath();
After all done,I can't see anything in browser.
This is your syntactically right code:
var canvas = document.getElementById("my_canvas");
var c = canvas.getContext("2d");
c.beginPath();
c.moveTo(100,200);
c.lineTo(200,200);
c.closePath();
c.stroke();
c.fill();
<body >
<canvas id="my_canvas" width=500 height=500></canvas>
</body >
You had multiple syntax errors in your code.
It is closePath instead of endPath and your element's spellings were wrong.I might have missed some in hurry .Just have a look on the syntax.
working
example
HTML
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
javascript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Related
Here is the code, I am drawing 2 circles and 2 lines and an additional line appears parallel to second line.Here is a screenshot
<html>
<head>
<body>
<canvas id="Panel" height=500 width=500 style ="border: 1px dotted green">
</canvas>
</body>
<script>
var canvas = document.getElementById("Panel");
var draw = canvas.getContext("2d");
draw.beginPath();
draw.arc(canvas.width/2,100,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.arc(canvas.width/2,200,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.moveTo(canvas.width/2,0);
draw.lineTo(canvas.width/2,100);
draw.moveTo(canvas.width/2,100);
draw.lineTo(canvas.width/2,200);
draw.stroke();
</script>
</head>
</html>
Check the snippet below. You just need to draw two separate forms
var canvas = document.getElementById("Panel");
var draw = canvas.getContext("2d");
draw.beginPath();
draw.arc(canvas.width/2 -50,200,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.moveTo(canvas.width/2 -50,0);
draw.lineTo(canvas.width/2 -50,200);
draw.stroke();
var draww = canvas.getContext("2d");
draww.beginPath();
draww.arc(canvas.width/2 +50,200,10,2*Math.PI,false);
draww.fillSytle="black";
draww.fill();
draww.moveTo(canvas.width/2 +50,0);
draww.lineTo(canvas.width/2 +50,200);
draww.stroke();
<canvas id="Panel" height=500 width=500 style ="border: 1px dotted green">
</canvas>
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 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 have tried this much of a code. I have two circles with a link beside, I need to color the circle onclick of the corresponding link. Suggest some solutions
<body>
<div class="row-fluid">
<div class="span1 offset3">
<canvas id="myCanvas" width="100" height="100"></canvas>
</div>
<div class="span1">
<br/>Hello
</div>
<div class="span1">
<canvas id="myCanvas1" width="100" height="100"></canvas>
</div>
<div class="span1">
<br/>Hi
</div>
</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 30, 20, 0, 2 * Math.PI);
ctx.stroke();
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 30, 20, 0, 2 * Math.PI);
ctx.stroke();
function () {
//onclick function which will change the color of the correspondind circle
}
</script>
</body>
How to fill a canvas circle when an html link is clicked
Here is a flexible function that draws a circle and optionally fills that circle:
function drawCircle(context,fill){
context.beginPath();
context.arc(55, 30, 20, 0, 2 * Math.PI);
context.closePath();
context.stroke();
if(fill){
context.fill()
}
}
jquery can listen for clicks on your anchors.
Then jquery calls the drawCircle function with fill=true (the circle is filled)
// fill the circle on click
$("#c1").click(function(){ drawCircle(ctx,true); });
$("#c2").click(function(){ drawCircle(ctx1,true); });
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/8LGPB/
<!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; padding:20px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("myCanvas1");
var ctx1=canvas1.getContext("2d");
// draw stroked but not filled circles
drawCircle(ctx,false);
drawCircle(ctx1,false);
function drawCircle(context,fill){
context.beginPath();
context.arc(55, 30, 20, 0, 2 * Math.PI);
context.closePath();
context.stroke();
if(fill){
context.fill()
}
}
// fill the circle on click
$("#c1").click(function(){ drawCircle(ctx,true); });
$("#c2").click(function(){ drawCircle(ctx1,true); });
}); // end $(function(){});
</script>
</head>
<body>
<div class="row-fluid">
<div class="span1 offset3">
<canvas id="myCanvas" width="100" height="100"></canvas>
</div>
<div class="span1">
<br/><a id="c1" href="#">Hello</a>
</div>
<div class="span1">
<canvas id="myCanvas1" width="100" height="100"></canvas>
</div>
<div class="span1">
<br/><a id="c2" href="#">Hi</a>
</div>
</div>
</body>
</html>
use this code script tag for each function
<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.fillStyle = 'blue';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
</script>
When I modify HTML5 Canvas size, and draw next text, the aspect ratio of the text is skewed. I do not expect this behavior. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<script src="jquery-ui/js/jquery-1.9.1.js"></script>
<style> canvas{border:1px solid green} </style>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var height=200;
var myVar=setInterval(function(){repeat()},1000);
function repeat(){
$('#myCanvas').css("height",height+=50);
$('#myCanvas').css("width",300);
// var canvas = document.getElementById('myCanvas');
// var context = canvas.getContext('2d');
context.font = 'italic 40pt Calibri';
context.fillText("Super test", 40, 100);
}
</script>
using canvas.setAttribute('height', h); instead of $('#myCanvas').css("height",h); ...
<!DOCTYPE HTML>
<html>
<script src="jquery-ui/js/jquery-1.9.1.js"></script>
<style> canvas{border:1px solid green} </style>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var height=200;
var myVar=setInterval(function(){repeat()},1000);
function repeat(){
canvas.setAttribute('height', height+=50);
context.font = 'italic 40pt Calibri';
context.fillText("Super test", 40, 100);
}
</script>