Use fillRect() to fill a rectangle in the current color, gradient, or pattern. Use strokeRect() to stroke a rectangle (draw the outline). Use clearRect() to clear a rectangle (erase that area to transparent black). To draw a rectangle, specify the x and y coordinates (with 0,0 in the upper-left corner of the canvas) and the height and width of the rectangle. Once you’ve set a context and a stroke or fill style, you can begin drawing shapes on the canvas. For more information, see Gradients and Patterns. To set the line width to 2 pixels, for example, set ctx.lineWidth = 2.Ĭolors can be specified in any of the usual CSS ways, such as "white", "rgb(255, 255, 255)", or "#ffffff".Ĭolors can also be specified using RGBa, which specifies the 8-bit RGB values and an alpha value between 0 (transparent) and 1 (completely opaque), such as "rgba(255, 255, 255, 1.0)", for example.Ī gradient or pattern can be used instead of a color. The thickness of the stroke is determined by the context’s lineWidth property. The following snippet specifies that drawing should be stroked in black or filled in gray at 50% opacity.Ĭtx.fillStyle = "rgba(128, 128, 128, 0.5)" The stroke or fill style specifies the color the element is drawn in. To actually draw a line or shape, you need to specify a fill style or a stroke style. Strokes and fills can be set to a color, pattern, or gradient. You can set the thickness of lines and strokes. Shapes can be stroked (drawn in outline) or filled. Paths can be closed to form complex shapes. Lines, curves, and arcs can be connected at their endpoints to form paths. The 2D drawing context has methods for drawing rectangles, lines, curves, arcs, and circles.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |