How to draw a simple rectangle or circle on a canvas?
Jun 30, 2025 am 01:56 AM
To draw rectangles and circles on HTML canvas, you must first set the canvas element and get the drawing context. 1. Create a
Drawing a simple rectangle or circle on an HTML canvas isn't too hard once you understand the basics. You just need a <canvas></canvas> element and some JavaScript to draw shapes on it.
Setting up the canvas
Before drawing anything, you need to create a canvas in your HTML:
<canvas id="myCanvas" width="300" height="200"></canvas>
Then, in JavaScript, get the canvas context like this:
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d');
The ctx variable gives you access to drawing functions. Once that's set up, you can start drawing.
Drawing a rectangle
There are a few ways to draw rectangles. The most common method is using fillRect() which draws a filled rectangle:
ctx.fillStyle = 'blue'; ctx.fillRect(50, 50, 100, 80);
- The first two numbers are the x and y position (top-left corner).
- The next two are the width and height.
- You can change
fillStyleto any color you want.
If you just want an outline, use strokeRect() instead of fillRect() .
Drawing a circle
To draw a circle, you'll use the arc() method:
ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fillStyle = 'red'; ctx.fill();
Here's what each parameter means:
- x and y: center point of the circle
- radius: how big the circle is
- start angle and end angle: usually 0 to 2π for a full circle
- optional direction: default is clockwise
You can also use stroke() instead of fill() if you only want the outline.
A couple small but important notes
- Always call
beginPath()when starting a new shape, especially if you're drawing multiple things. - Make sure your canvas dimensions match what you expect — sometimes CSS scaling messes with pixel alignment.
- If nothing shows up, double-check that you selected the right canvas and context.
Basically that's it. With just these tools, you can start building more complex drawings.
The above is the detailed content of How to draw a simple rectangle or circle on a canvas?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
A quick guide to learning Python drawing: code example for drawing ice cubes
Jan 13, 2024 pm 02:00 PM
Quickly get started with Python drawing: code example for drawing Bingdundun Python is an easy-to-learn and powerful programming language. By using Python's drawing library, we can easily realize various drawing needs. In this article, we will use Python's drawing library matplotlib to draw a simple graph of ice. Bingdundun is a cute panda who is very popular among children. First, we need to install the matplotlib library. You can do this by running in the terminal
uniapp implements how to use canvas to draw charts and animation effects
Oct 18, 2023 am 10:42 AM
How to use canvas to draw charts and animation effects in uniapp requires specific code examples 1. Introduction With the popularity of mobile devices, more and more applications need to display various charts and animation effects on the mobile terminal. As a cross-platform development framework based on Vue.js, uniapp provides the ability to use canvas to draw charts and animation effects. This article will introduce how uniapp uses canvas to achieve chart and animation effects, and give specific code examples. 2. canvas
Learn the canvas framework and explain the commonly used canvas framework in detail
Jan 17, 2024 am 11:03 AM
Explore the Canvas framework: To understand what are the commonly used Canvas frameworks, specific code examples are required. Introduction: Canvas is a drawing API provided in HTML5, through which we can achieve rich graphics and animation effects. In order to improve the efficiency and convenience of drawing, many developers have developed different Canvas frameworks. This article will introduce some commonly used Canvas frameworks and provide specific code examples to help readers gain a deeper understanding of how to use these frameworks. 1. EaselJS framework Ea
What versions of html2canvas are there?
Aug 22, 2023 pm 05:58 PM
The versions of html2canvas include html2canvas v0.x, html2canvas v1.x, etc. Detailed introduction: 1. html2canvas v0.x, which is an early version of html2canvas. The latest stable version is v0.5.0-alpha1. It is a mature version that has been widely used and verified in many projects; 2. html2canvas v1.x, this is a new version of html2canvas.
Explore the powerful role and application of canvas in game development
Jan 17, 2024 am 11:00 AM
Understand the power and application of canvas in game development Overview: With the rapid development of Internet technology, web games are becoming more and more popular among players. As an important part of web game development, canvas technology has gradually emerged in game development, showing its powerful power and application. This article will introduce the potential of canvas in game development and demonstrate its application through specific code examples. 1. Introduction to canvas technology Canvas is a new element in HTML5, which allows us to use
Learn how to use word drawing in 1 minute!
Mar 20, 2024 pm 09:10 PM
Usually, we not only edit text in Word software, but also insert some patterns and shapes; Word software is an indispensable software for us in the office; it is so powerful, of course it can also be used for drawing! So, how do we complete word drawing? Where are the word drawing tools? How to use it? Here is a brief introduction to you for your reference. I hope it will be helpful. The steps are as follows: 1. First, we open the Word software on the computer; then, we create a new blank word document; at this time, we can edit text here, or draw patterns, just click on the text. 2. Next, we select the [Insert] button in the [Navigation Bar] above; then, we select [Shape
Demystifying the Canvas API: everything from simple drawing to advanced special effects
Jan 17, 2024 am 09:44 AM
CanvasAPI is a powerful drawing tool provided by HTML5, which can implement various functions from basic drawing to advanced special effects. This article will give you an in-depth understanding of how to use CanvasAPI and provide specific code examples. Basic drawing The most basic part of Canvas API is to draw simple graphics, such as rectangles, circles, straight lines, etc. Here is a code example that creates a rectangle and fills it with color: constcanvas=document.getElementB
Where to write canvas code
Dec 20, 2023 pm 03:17 PM
Canvas code can be written inside the <body> tag of an HTML file, usually as part of the HTML document. The core of the Canvas code is to obtain and operate the context of the Canvas element. The reference to the Canvas element is obtained through document.getElementById('myCanvas') , and then use getContext('2d') to get the 2D drawing context.
