- Canvas Cookbook
- Bhushan Purushottam Joshi
- 235字
- 2021-07-16 11:03:16
Drawing rectangles
There are three different functions in the canvas API to draw rectangles. They are:
rect(xPos,yPos,width,height)
fillRect(xPos,yPos,width,height)
strokeRect(xPos,yPos,width,height)
Let's see these all together in a single recipe. So here is the output of our first recipe:

How to do it…
The output that shows three different rectangles, uses a call to three different functions, which are explained further. The recipe is as follows.
An HTML file that includes the canvas element:
<html> <head> <title>Rectangles</title> <script src="Rectangles.js"></script> </head> <body onload="init()" bgcolor="#FFFFCC"> <canvas id="canvas" width="250" height="200" style="border:2px solid blue;" > your browser does not support canvas </canvas> <H1>Rectangles</H1> </body> </html>
The JavaScript file as mentioned in the <script>
tag in the previously given code:
function init() { var canvas = document.getElementById("canvas"); if(canvas.getContext) { // Color of drawing, fillStyle is this color var ctx = canvas.getContext("2d"); // Draw a square(rectangle with same sides) // from top left corner x,y, width, height ctx.strokeStyle="purple" ctx.rect(10,10,70,50); ctx.fillStyle="lightgreen"; ctx.fill(); ctx.stroke(); //draw another rectangle ctx.fillStyle="crimson"; ctx.fillRect (50,25, 100,100); //draw yet another ctx.strokeStyle="blue"; ctx.lineWidth=10; ctx.strokeRect(100,60,80,130); } }
How it works...
This is what you can observe in the output of the recipe:
- The top-most blue bordered rectangle is drawn using the
strokeRect()
function - The second red colored rectangle is drawn using the
fillRect()
function - The first green colored rectangle is drawn using the
rect()
andfill()
functions
The property fillStyle
decides the color for filling the rectangle. The strokeStyle
property decides the color of the border.
The three rectangles drawing functions accept the following parameters:

Diagrammatically it can be shown as follows:

推薦閱讀
- DevOps:軟件架構(gòu)師行動(dòng)指南
- Web交互界面設(shè)計(jì)與制作(微課版)
- Ext JS Data-driven Application Design
- Mastering QGIS
- Serverless computing in Azure with .NET
- C和C++游戲趣味編程
- Mastering Akka
- Python+Tableau數(shù)據(jù)可視化之美
- 深入解析Java編譯器:源碼剖析與實(shí)例詳解
- 從零開始學(xué)Selenium自動(dòng)化測試:基于Python:視頻教學(xué)版
- Visual Basic 程序設(shè)計(jì)實(shí)踐教程
- Java Hibernate Cookbook
- 計(jì)算機(jī)組裝與維護(hù)(第二版)
- Modular Programming with JavaScript
- C語言程序設(shè)計(jì)教程