Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Chapter 4: HTML5 Canvas

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 522
    Comment on it

    Hello Readers,
     
    To learn canvas you have basic understanding of HTML and JavaScript.

    The HTML5 <canvas> tag gives you way to draw graphics via scripting (JavaScript). You can use it for photo compositions, graph and animation. All core HTML5 attributes like id, name and class etc works with canvas.

    Default <canvas> is blank so, to display anything script is the first requirement to rendering context and draw. An object is returned by getContext() method which provides methods and properties for drawing on the canvas. You can draw anything like text, boxes, circles, lines etc.


    Browser Support -

    • Chrome 4.0+
    • IE 9.0+
    • Firefox 2.0+
    • Safari3.1+
    • Opera9.0+

    It support all css3 property

     

    Note :- canvas was originally introduced by Apple for the OS X Dashboard and Safari (- MDN)

    Example for canvas -

    HTML-

    <canvas id="myCanvas"></canvas>

    Script-
     

    var canvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");
    
    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 100, 100);

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: