//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
var ctx = document.getElementById('canvas').getContext('2d');
var ctx = document.getElementById('canvas').getContext('2d');
Also, my didn't work until I put your code into a function and to run when it was initialized. Something like this:
function init(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#FF1C0A";
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
//the rectangle is half transparent
ctx.fillStyle = "rgba(255, 255, 0, .5)"
ctx.beginPath();
ctx.rect(15, 150, 120, 120);
ctx.closePath();
ctx.fill();
}
window.addEventListener("load", init, false);
$(document).ready(function(){
//get a reference to the canvas
var ctx = $("#canvas")[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
});
You may want to comment out the arc(...) call and try ctx.rect(x, y, width, height).
We can also turn our ball different colors. Changing the value of ctx.fillStyle will change the canvas' current color; we can set its value to a
hex string of the format '#rrggbb' or to a string 'rgba(r, g, b, a)'
where a is a value between 0 and 1 representing the transparency of the color.
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();
for (var i=0; i