Question

I m a little confused to what HTML5 canvas is. I ve been told it is JavaScript, but it seems to be a much bigger deal?

What makes it different than javascript?
Why is it so amazing?
Does it do other things than JavaScript?

Answer 1

I suggest you read this article HTML5 Canvas - the basics

But in short. It does not replace javascript.

HTML 5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a "context" (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.

Answer 2

The canvas is basically an img element that you can draw on using javascript.

Answer 3

The Canvas element is essentially a drawing canvas that can be painted on programmatically; a sort of scriptable bitmap drawing tool for the web.

I suppose the "amazing" thing about it, apart from the fact that we can now all create web-based MS Paint clones with ease, is that you have a much richer, completely free-form area for creating complex graphics client-side and on-the-fly. You can draw pretty graphs, or do things with photos. Allegedly, you can also do animation!

Mozilla s Developer Center has a reasonable tutorial if you want to try it out.

Answer 4

First of all, Canvas is NOT JavaScript! These 2 are totally different things.

Canvas is a HTML5 element that can be used for rendering graphics, animation, graphs, photo compositions or any other visual objects on the fly by using JavaScript. More often, canvas has used for building web game and online presentation.

Answer 5

Canvas - A rectangle area like white paper
Context - Returns the object by using what we can call many functions on which is used to draw the graphics and animations on a canvas (like how pencils are used on paper)

See the following example which draws a line on the canvas:

<html>
      <body>
       <canvas id="c" width="200" height="200" style="border:1px solid"></canvas>
        <script>
          var canvas = document.getElementById("c");//get the canvas in javascript
          var context = canvas.getContext("2d");//getcontext on canvas
          context.beginPath();//start the path.we are going to draw the line
          context.moveTo(20,20);//starting point of Line
          context.lineTo(40,20);//ending point of Line
          context.stroke(); //ink used for drawing Line (Default: Black)
        </script>
      </body>
    </html>

友情链接