Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


HTML5 Canvas

html5 canvas

  • Please log in to reply
 

#1 OneDes

OneDes

    Senior Member

  • Designer
  • 282 posts

Posted 29 December 2012 - 04:17 PM

HTML5 canvas element creates a rectangular space where you can use JavaScript to conduct drawing operations, use images, process transformations and create shapes. Web pages can use this canvas element to make visual effects, that can control the canvas area as precise as individual pixels.

Element

The canvas tool can be included by Web pages by including a canvas element :
<canvas id="canvasEl" width="500" height="400"></canvas>
var theCanv = document.getElementById("canvasEl");
var cont = theCanvas.getContext('2d');

Shapes
Developers can define lines, paths and shapes within a canvas using JavaScript:
cont.beginPath();
cont.moveTo(55, 105);//x, y
cont.lineTo(155, 210);//x, y
JavaScript can specify shapes for a context object to draw as :
cont.fillRect(15, 55, 120, 120);
This starts from X position 15 and Y position 55, drawing a square shape 120 pixels across.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users