Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Draw on the Canvas with JavaScript
Drawing on the HTML canvas is to be done with JavaScript. Use the HTML DOM Method getElementById() and getContext() before drawing on the canvas.
For that, follow some steps −
- You need to use the getElementById() method to find the canvas element.
- Use the getContext(), which is drawing object for the canvas. It provides the methods and properties for drawing.
- After that draw on the canvas.
Example
You can try to run the following code to draw canvas on JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("newCanvas");
var ctxt = canvas.getContext("2d");
ctxt.fillStyle = "#56A7E2";
ctxt.fillRect(0,0,250,120);
</script>
</body>
</html>
Updated on: 2020-06-15T11:54:40+05:30
609 Views
Advertisements