A 'Clear' button will clear the canvas context, so to not display the numbers one over the other; that will happen if you click the 'Set Nr' button again (see the comments in code). Demo (Click 'Set Nr' to add a random number, click 'Clear' to clear the canvas). Description This tutorial shows you how to use canvas to create over a dozen different types of drawing effects. The snippet gives you an option to choose what type of brush you'd like to draw with (choose from one of sixteen different and colorful options!), and it also allows you to clear the canvas as well.
Var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');ctx.font = '20px Georgia';ctx.fillText('Hello World!' , 10, 50);ctx.font = '30px Verdana';// Create gradientvar gradient = ctx.createLinearGradient(0, 0, c.width, 0);gradient.addColorStop('0',' magenta');gradient.addColorStop('0.5', 'blue');gradient.addColorStop('1.0', 'red');// Fill with gradientctx.fillStyle = gradient;ctx.fillText('Big smile!' , 10, 90);Browser SupportThe numbers in the table specify the first browser version that fully supports themethod. MethodfillTextYes9.0YesYesYesNote: The maxWidth parameter is not supported in Safari 5.1 and earlier versions.Definition and UsageThe fillText method draws filled text on the canvas.
Thedefault color of the text is black.Tip: Use the property to specifyfont and font size, and use theproperty to render the text in another color/gradient. JavaScript syntax:context.fillText( text,x,y,maxWidth);Parameter Values ParameterDescriptionPlay ittextSpecifies the text that will be written on the canvasxThe x coordinate where to start painting the text (relative to the canvas)yThe y coordinate where to start painting the text (relative to the canvas)maxWidthOptional.
The maximum allowed width of the text, in pixels.
Canvas text can be drawn using font and text attributes along with several text methods. The font attribute string has a default setting of 10px, sans-serif, and can include anything that you would normally add within a CSS font rule. The textAlign attribute string is self explanatory, and it has a default value of start and supports the values: start, end, left, right, or center. The textBaseline IDL attribute string has a default of alphabetic, and supports the values: top, hanging, middle, alphabetic, ideographic, or bottom.The WHATWG specifies the attribute's keywords which correspond to the alignment points in the font, where:. top corresponds to the top of the em square. hanging is the hanging baseline.
![Canvas 2d Clear Text Canvas 2d Clear Text](http://www.html5gamedevs.com/uploads/monthly_2017_07/error.jpg.c6600cf81c1c756754eaa18e8c7b0727.jpg)
middle is the middle of the em square. alphabetic is the alphabetic baseline. ideographic is the ideographic baseline. bottom corresponds to the bottom of the em square.