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

da Vinci of the 21st Century

Interactive Monty Hall Problem Implementation

Image to a string in JavaScript