Sunny Books
What we have

HTML5 canvas

The HTML5 canvas is a very powerful new element which is used to draw graphics, on the fly, via JavaScript. the canvas element is only a container for graphics, we have to use a script to draw the graphics. The getContext() method returns an object that provides methods and properties for drawing on the canvas.

Draw a solid rectangle

<canvas id="rec" width="200" height="150" style="border:1px solid #ccc;">
<script>
rec=document.getElementById("rec");
var contextR = rec.getContext('2d');
contextR.fillStyle="#2aa1f4";
contextR.fillRect(25,25,150,100);
</script>

Draw a stroked rectangle

<canvas id="recS" width="200" height="150" style="border:1px solid #ccc;">
<script>
recS=document.getElementById("recS");
var contextRS = recS.getContext('2d');
contextRS.strokeStyle="#FF0000";
contextRS.strokeRect(25,25,150,100);
</script>

Draw a line

<canvas id="recL" width="200" height="150" style="border:1px solid #ccc;">
<script>
recL=document.getElementById('recL');
var contextL = recL.getContext('2d');
contextL.beginPath();
contextL.lineWidth="5";
contextL.strokeStyle="green";
contextL.moveTo(0,75);
contextL.lineTo(250,75);
contextL.stroke(); // Draw it
</script>

Draw a solid circle

<canvas id="recC" width="200" height="150" style="border:1px solid #ccc;">
<script>
recC=document.getElementById('recC');
var contextC = recC.getContext('2d');
contextC.beginPath();
contextC.fillStyle="#2aa1f4";
contextC.arc(100,75,50,0,2*Math.PI);
contextC.fill();
</script>

Draw a half stroked circle

<canvas id="recCH" width="200" height="150" style="border:1px solid #ccc;">
<script>
recCH=document.getElementById('recCH');
var contextCH = recC.getContext('2d');
contextCH.beginPath();
contextCH.strokeStyle="blue";
contextCH.arc(100,75,50,0,1*Math.PI);
contextCH.stroke();
</script>

Write text

<canvas id="recT" width="200" height="150" style="border:1px solid #ccc;">
<script>
recCH=document.getElementById('recCH');
var contextT = recT.getContext('2d');
contextT.font="30px Verdana";
var gradient=contextT.createLinearGradient(0,0,recT.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
contextT.fillStyle=gradient;
contextT.fillText("Big Smiles!",20,80);
</script>

Shadows

<canvas id="recShadow" width="200" height="150" style="border:1px solid #ccc;">
<script>
recShadow=document.getElementById('recShadow');
var contextShadow = recT.getContext('2d');
contextShadow.fillStyle="#2aa1f4";
contextShadow.shadowBlur=20;
contextShadow.shadowOffsetX=10;
contextShadow.shadowOffsetY=10;
contextShadow.shadowColor="blue";
contextShadow.fillRect(25,25,150,100);
</script>

Linear gradient

<canvas id="recLG" width="200" height="150" style="border:1px solid #ccc;">
<script>
var recLG = $('#recLG')[0];
var contextLG = recLG.getContext('2d');
lgradient = contextLG.createLinearGradient(0, 0, recLG.width, 0);
lgradient.addColorStop("0", "#f41a04");
lgradient.addColorStop(".25", "#f4d007");
lgradient.addColorStop(".50", "#06f406");
lgradient.addColorStop(".75", "#09f4ec");
lgradient.addColorStop("1.0", "#0a36f4");
contextLG.fillStyle=lgradient;
contextLG.fillRect(0,0,200,150);
</script>

Radial gradient

<canvas id="recRG" width="200" height="150" style="border:1px solid #ccc;">
<script>
var recRG = $('#recRG')[0];
var contextRG = recRG.getContext('2d');
rgradient = contextRG.createRadialGradient(100,75,5,110,80,100);
rgradient.addColorStop("0", "#f41a04");
rgradient.addColorStop(".25", "#f4d007");
rgradient.addColorStop(".50", "#06f406");
rgradient.addColorStop(".75", "#09f4ec");
rgradient.addColorStop("1.0", "#0a36f4");
contextRG.fillStyle=rgradient;
contextRG.fillRect(0,0,200,150);
</script>
SUNWEB EXPERT