The Following example gives you an idea to scrolling the text on the canvas in HTML 5. The example uses the save(), translate() and restore() methods to animate the text. Continue reading Scrolling text right to left in HTML5
We can set the text alignment of the text by setting the context’s textAlign property. The valid values will be left, right, and center. Continue reading Text style and settings in HTML5 canvas
fillText(text, x, y [,maxWidth]) method fills the text in the current fill style.
strokeText(text, x, y [,maxWidth]) method outlines the text in the current stroke style.
Both methods uses the following arguments:
text: The text to draw into the context.
x: The X coordinate at which to begin drawing.
y: The Y coordinate at which to begin drawing.
maxWidth(Optional): the maximum width to draw.
we use the font property of the canvas context to set the font of the drawn text that will contains the font style, size, and family name.
The following example will draw the string ‘Welcome’ on the canvas.
The bezier curve requires ending points and two control points and starting points will be current point. You can use the beginPath and moveTo methods to set a starting point. Continue reading Bezier curve in HTML5 canvas
The quadratic curve requires ending and control points and starting points will be current point. If current point is not defined then you can use the beginPath and moveTo methods to set a starting point. Continue reading Draw Quadratic Curve in HTML5
A gradient effect specifies a starting color, an ending color, and an area over which color changes and when the gradient effect defined by a straight line(gradient line) then it will be Linear gradient. Continue reading Linear gradient in HTML5
The following code examples shows a method that creates a rectangle and circle on the canvas. We use the strokeRect and fillRect methods to draw and fill rectangle. Continue reading Draw Rectangle and Circle shape in HTML5 canvas
You can draw any custom shape by using rectangles, adding line segments, curves, or arcs, and optionally closing the path with stroke and different fill styles. Continue reading Drawing custom shapes in HTML5 canvas
We use moveTo and lineTo methods to draw the line paths. Continue reading Draw Line on HTML5 canvas