HTML for Beginners
Canvas
- 1) What is the canvas element in HTML5?The element is a container that is used to draw graphics on the web page using scripting language like JavaScript. It allows for dynamic and scriptable rendering of 2D shapes and bitmap images. There are several methods in canvas to draw paths, boxes, circles, text and add images. For Example: Your browser does not support the HTML5 canvas tag.
- 2) What is SVG?HTML SVG is used to describe the two-dimensional vector and vector/raster graphics. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with the text editor. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.
- 3) How does canvas look like by default?Canvas (by default) results in a rectangular container with no border and no content.
- 4) What should we do if we want to specify border for canvas?We can use css style tag as follows,
- 5) In order to draw graphics what is the basic thing which is required?We need to get the reference for canvas object in JavaScript and for that, we will use “id” of canvas and “document.getElementById” method of javascript. var canvas = document.getElementById(‘foo’);
- 6) How to make sure Canvas is supported in the browser using javascript?We use getContext of canvas object. if(canvas.getContext) { //Supported }else{ // Not Supported }
- 7) How to work with rectangles inside canvas?We have three methods for that fillRect, strokeRect and clearRect.
4iv>