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”