Attempt to Draw a Clip Art of a person using JavaScript

I have been thinking a lot on what to blog about. I have not been able to find some interesting topic to write about. So, I have been reading through the news and different online content and until I observed a clip art of a person. It was an image and storing and retreiving an image takes more data to be transfered from the server to the client. I bet it would be much more efficient if we simply programmed it in.

In this post, I am going to attempt to draw a person in using JavaScript. Creation of HTML DIVs and adding the styles shall also be taken care of from the JavaScript side.

First let's set up the drawing canvas. I will be using DIVs in this attempt and not going to use any of the SVG related tags.

var canvas = document.createElement("div");
canvas.style.background = "#efefef";
canvas.style.width = "500px";
canvas.style.height = "500px";
document.body.appendChild(canvas);

Now, let's create the head. The head may be a perfect circle with a diameter of 50px. It should be positioned at the center laterally.

var head = document.createElement("div");
head.style.background = "#00aaff";
head.style.width = "50px";
head.style.height = "50px";
head.style.position = "absolute";
head.style.left = "225px";
head.style.top = "30px";
head.style.borderRadius = "50%";
canvas.appendChild(head);
The body may be represented by a rounded rectangle. It should have a width only slightly larger than the head and quite a bit more height.

var body = document.createElement("div");
body.style.background = "#00aaff";
body.style.width = "60px";
body.style.height = "150px";
body.style.position = "absolute";
body.style.left = "220px";
body.style.top = "90px";
body.style.borderRadius = "16px";
canvas.appendChild(body);
Now, lets get started with drawing the arms and legs.

var leg1 = document.createElement("div");
leg1.style.background = "#00aaff";
leg1.style.width = "25px";
leg1.style.height = "150px";
leg1.style.position = "absolute";
leg1.style.left = "220px";
leg1.style.top = "250px";
leg1.style.borderRadius = "16px";
canvas.appendChild(leg1); 
var leg2 = document.createElement("div");
leg2.style.background = "#00aaff";
leg2.style.width = "25px";
leg2.style.height = "150px";
leg2.style.position = "absolute";
leg2.style.left = "255px";
leg2.style.top = "250px";
leg2.style.borderRadius = "16px";
canvas.appendChild(leg2); 
var arm1 = document.createElement("div");
arm1.style.background = "#00aaff";
arm1.style.width = "20px";
arm1.style.height = "140px";
arm1.style.position = "absolute";
arm1.style.left = "190px";
arm1.style.top = "95px";
arm1.style.borderRadius = "16px";
canvas.appendChild(arm1); 
var arm2 = document.createElement("div");
arm2.style.background = "#00aaff";
arm2.style.width = "20px";
arm2.style.height = "140px";
arm2.style.position = "absolute";
arm2.style.left = "290px";
arm2.style.top = "95px";
arm2.style.borderRadius = "16px";
canvas.appendChild(arm2);
Observe that much of the code is pretty similar. Just a few values have been changed here and there. One could simply write a function with these values as parameter and render them even more effectively. Well, I am not doing that in this post. Instead, I would like add in a bow tie to the person.

var tie = document.createElement("div"); 
var tiepart1 = document.createElement("div");
tiepart1.style.background = "#0011ff";
tiepart1.style.width = "15px";
tiepart1.style.height = "15px";
tiepart1.style.position = "absolute";
tiepart1.style.left = "235px";
tiepart1.style.top = "95px";
tiepart1.style.transform = "rotate(45deg)";
tie.appendChild(tiepart1); 
var tiepart1 = document.createElement("div");
tiepart1.style.background = "#0011ff";
tiepart1.style.width = "15px";
tiepart1.style.height = "15px";
tiepart1.style.position = "absolute";
tiepart1.style.left = "250px";
tiepart1.style.top = "95px";
tiepart1.style.transform = "rotate(45deg)";
tie.appendChild(tiepart1);
canvas.appendChild(tie);
This is how the whole thing would look like.
























That's all folks.

Comments

Popular posts from this blog

Drawing in the Air

Smart Containers - An old project during my college days that could make Amazon better

Interactive Monty Hall Problem Implementation