practising C, C++ and JAVA programming with examples

HTML with canvas to write text on canvas.

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.font = "40px Arial"; //changes the size of text to 40.

object.fillText("Hello javascript", 40, 50) //40 is x co-ordinate,50 is y co-ordinate

</script>

</body>

</html>

HTML with canvas to write text on canvas. with background color

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.font = "40px Arial"; //changes the size of text to 40.

object.fillStyle = "green";

object.fillText("Hello javascript", 40, 50) //40 is x co-ordinate,50 is y co-ordinate

</script>

</body>

</html>

HTML with canvas to fill entire canvas with color

<html>

<head>

<title>

html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.

</title>

</head>

<body>

</canvas>

var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID

var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable

object.fillStyle = "green"; //changes the color of canvas

//Either we can use

//object.fillRect(0, 0, 500, 500);//it fills the entire canvas with green color

//or

object.fillRect(0, 0, straightline.width, straightline.height); //it fills the entire canvas with green color

</script>

</body>

</html>

HTML graphics

We have two ways to work with graphics. They are:

using canvas

using svg

Difference between canvas and SVG:

HTML with SVG concept

Scalable Vector Graphics (SVG) is a 2D vector image format based on an XML syntax.

The W3C began work on SVG in the late 1990s, but SVG only became popular when Internet Explorer 9 came out with SVG support. All major browsers now support SVG.

Based on an XML syntax, SVG can be styled with CSS and made interactive using JavaScript. HTML5 now allows direct embedding of SVG tags in an HTML document.

As a vector image format, SVG graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size. SVG also provides a useful set of tools, such as clipping, masking, filters, and animations.(Source:https://developer.mozilla.org/en-US/docs/Glossary/SVG)

----------------------------------------------------------------------------------------------------------------

Let's understand SVG with the help of following examples.

-------------------------------------------------------------------------------------------

1)HTML with SVG to draw circle.

click the solution

2)HTML with SVG to draw rectangle

click the solution

3)HTML with SVG to draw rectangle

click the solution

4)HTML with SVG to draw ellipse.

click the solution

5)HTML with SVG to draw line

click the solution

6)HTML with SVG to draw polygon.

click the solution

7)HTML with SVG to draw polyline

click the solution

8)HTML with SVG to draw path

click the solution

9)HTML with SVG to draw text

click the solution

10)HTML with SVG to draw text.

click the solution

11)HTML with SVG to animate object.

click the solution

12)HTML with SVG to animate the circle.

click the solution

HTML graphics with CANVAS tag

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.

source:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

-----------------------------------------------------------------------------------------------------------------

LEt's understand about canvas in detail using following example.

--------------------------------------------------------------------------------------------------------

1)HTML with CANVAS to draw rectangle.

click me

2)HTML with CANVAS to draw square.

click here

3)HTML with canvas to draw straight line.

click here

4)HTML with canvas to draw circle.