இணையப் பக்கங்களில் 2D/3D படங்களை javascript கொண்டு வரைய <canvas> பயன்படுகிறது.
* இதில் resolution குறிப்பிடுவது அவசியம்.
* Text காட்டுவது கடினம்
* படங்களை jpg, png ஆகச் சேமிக்கலாம்.
* விளையாட்டுகளை உருவாக்கப் பெரிதும் பயன்படும் .
<canvas>-ல் id, width, height-ஐ கண்டிப்பாகத் தர வேண்டும்.
உதாரணம்
<canvas id="sampleCanvas" width="100" height="100">
/*..*/
</canvas>
javascript கொண்டு இதை அணுகுதல்.
உதாரணம்
var canvas = document.getElementById("sampleCanvas");
படம் வரைதல்: getcontext(2d) என்ற function-ஆனது canvas-ஐ தயார் செய்கிறது. x,y coordinate தருவதன் மூலம் எளிதில் வரையலாம்.
var canvas = document.getElementById("sampleCanvas");
var context=canvas.getContext("2d");
Fill Rect (x1,y1,x2,y2) – பெட்டி வரைய
var canvas = document.getElementById("sampleCanvas");
var context=canvas.getContext("2d");
context.fillRect(0,0,100,200);
Moveto(x,y) – line தொடக்கம்
Lineto (x,y) – line முடிவு
stroke() – line வரைய உதாரணம்
<!DOCTYPE html>
<html>
<body>
<img id="logo" src="sample.jpg" alt="logo" width="220" height="277"/>
<canvas id="sampleCanvas" width="100" height="100" >
</canvas>
<script>
var c=document.getElementById("sampleCanvas");
var context=c.getContext("2d");
context.moveTo(0,0);
context.lineTo(200,100);
context.strokeStyle = '#ff00ff'
context.lineWidth = 10;
context.stroke();
</script>
</body>
</html>
