CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Dan
Dan

Reputation: 10171

What is the HTML5 canvas?

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?

  1. What makes it different than javascript?

  2. Why is it so amazing?

  3. Does it do other things than JavaScript?

Upvotes: 4

Views: 4914

Answers (5)

Nifle
Nifle

Reputation: 11933

I suggest you read this article HTML5 Canvas - the basics
edit: This link is ancient, there are several better resources a web-search away /OP

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.

Upvotes: 7

nandhakumar.c
nandhakumar.c

Reputation: 71

  • 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>

Upvotes: 1

YT Low
YT Low

Reputation: 21

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.

Upvotes: 2

Rob
Rob

Reputation: 48379

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.

Upvotes: 2

Tor Valamo
Tor Valamo

Reputation: 33789

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

Upvotes: 7

Related Questions