Skip to content
← Back to Community
How to make Drawings with Html
Profile icon
TheBest156

HTML5 Canvas

HTML5 Canvas is used to draw graphics on fly using javascript. The canvas element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. To learn more about canvas follow this link.

Just use FULL CODE at bottom of tutorial

Example: To write some thing inside canvas use this

<canvas id="paintSamp1" style="height: 150px;width:350px; margin:auto;"></canvas>

``
<script type="text/javascript"> var canvasa = document.getElementById('paintSamp1'); var context1 = canvasa.getContext('2d');

context1.font = 'normal 18px Arial';
context1.textAlign = 'center';
context1. textBaseline = 'middle';
context1.fillStyle = 'red'; // a color name or by using rgb/rgba/hex values
context1.fillText('Welcome to trinity tuts!', 150, 50); // text and position
`

In this above example i first create canvas tag and set height and width and assign id to canvas. After this i include jQuery from google cdn. Now inside

Now i explain you how to make a simple web based paint application

Create a <canvas> inside body.

`
Create some option we used for drawing like pen size, clear canvas, eraser etc.

`

Voters
Profile icon
Kelvin-LonelyLo
Profile icon
IdkWhy1
Profile icon
justyourfuture
Profile icon
TheBest156