Skip to content

Searcharticlesvideosblogsforumsinterview questionsarticles

Tech
Articles
Blogs
News
Videos
Interviews
Forums
Books
Events
- Jobs
- Stories

Article
Blog
Video
Ebook
Interview Question

Loading

Upcoming Events

23 NOV
AI Agents Conference 2026 - 3rd Edition

Our Training Programs

AI & Machine Learning
Mastering Large Language Models
Mastering Prompt Engineering
Certified Vibe Coder
Github Copilot Training
Generative AI for Beginners
n8n Automation & AI Agents Training

About Us Contact Us Privacy Policy Terms Brand Guidelines Partners C# Tutorials Consultants Ideas Report A Bug FAQs Sitemap Stories CSharp TV DB Talks Web3 Universe Jumpstart Blockchain

©2026 C# Corner.

All contents are copyright of their authors.

How to create drawing objects in Html 5?

Home
Forums
HTML 5

How to create drawing objects in Html 5?

Rajdeep Saha

8yAsked Mar 8, 2018, 11:51 AM857HTML 5

I need to create soma digrams which contains rectangle or circle or triangle design dynamically on depends upon some value comes from database. Is this type of diagrams has inbuild support in HTML5 or I need to use some third party tools?

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sign in to answer this question

It is the same account you read, post and publish with — and you will come straight back to this page.

Sign in Create an account

Debasis Saha8y ago
Accepted answer
For this case you need to use Canvas tag in HTML 5. Check the below code -

Html
"myCanvas" width="800" height="600">
You need a browser that supports HTML5!

Css
canvas {
border: 1px solid black;
}
Javascript
$(document).ready(function () {
drawSomething();
});

function drawSomething() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(10, 50, 100, 200);
}
u can replace the code of drawSomething() by below code -
function drawSomething() {
var canvas = document.getElementById('myCanvas')
, ctx = canvas.getContext('2d')
, offset = 15
, clearOffset = 30
, pushDownOffset = 10
, height = 50
, width = 100
, count = 4, i = 0;
for (i = 0; i < count; i++) {
ctx.fillRect(i * (offset + width) + offset, offset, width, height);
ctx.clearRect(i * (offset + width) + (clearOffset / 2) + offset,
offset + (clearOffset / 2) + pushDownOffset,
width - clearOffset, height - clearOffset)
ctx.strokeRect(i * (offset + width) + offset,
(2 * offset) + height, width, height);
}
}
+1