canvas-advanced

by bhupendra negi

HTML

<canvas id = "contain" width = "300" height = "300">
    Browser does not suppoprt canvas
</canvas>   
<input type= "button" value="Clear Canvas" id="clear"/>

CSS

#contain{
border: 1px solid blue    
}

JavaScript

var canvas = document.getElementById("contain");
var context = canvas.getContext("2d");
//context.translate(canvas.width/2 - 50,-canvas.height/2);

context.beginPath();


//context.rotate(Math.PI / 4);

//context.scale(1.5, .5);
context.globalAlpha = 0.5;
context.fillStyle = "red";
context.shadowColor = 'green';
context.shadowBlur = 10;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fillRect(0,0,100,50);

//context.save();
//context.scale(1.5, .5);
var tx = canvas.width / 2;
var ty = canvas.height / 2;

// apply custom transform


//scales the a
//context.beginPath();
context.fillStyle = "yellow";
context.fillRect(0,150,100,50);

//context.endPath();

// scale is used to increse and decrease  

// negative x value mirrorrs on Y axis , and negative y value mirrors on X axis

//context.translate(80,120);
context.font = '20pt Calibri';
context.textAlign = 'right';
context.fillStyle = 'blue';
context.fillText('Hello World!', 220, 130);
context.stroke();


var btn = document.getElementById("clear");
btn.addEventListener("click",function() {context.clearRect(0, 0,300, 300); },false);


// save canvas drawing to url
//var dataURL = canvas.toDataURL();
var dataURL =canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
// this will download the canvas picture
//window.location.href=dataURL;
//console.log(dataURL);