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"); = "#efefef"; = "500px"; = "500px";

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"); = "#00aaff"; = "50px"; = "50px"; = "absolute"; = "225px"; = "30px"; = "50%";
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"); = "#00aaff"; = "60px"; = "150px"; = "absolute"; = "220px"; = "90px"; = "16px";
Now, lets get started with drawing the arms and legs.

var leg1 = document.createElement("div"); = "#00aaff"; = "25px"; = "150px"; = "absolute"; = "220px"; = "250px"; = "16px";
var leg2 = document.createElement("div"); = "#00aaff"; = "25px"; = "150px"; = "absolute"; = "255px"; = "250px"; = "16px";
var arm1 = document.createElement("div"); = "#00aaff"; = "20px"; = "140px"; = "absolute"; = "190px"; = "95px"; = "16px";
var arm2 = document.createElement("div"); = "#00aaff"; = "20px"; = "140px"; = "absolute"; = "290px"; = "95px"; = "16px";
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"); = "#0011ff"; = "15px"; = "15px"; = "absolute"; = "235px"; = "95px"; = "rotate(45deg)";
var tiepart1 = document.createElement("div"); = "#0011ff"; = "15px"; = "15px"; = "absolute"; = "250px"; = "95px"; = "rotate(45deg)";
This is how the whole thing would look like.

That's all folks.


Popular posts from this blog

Interactive Monty Hall Problem Implementation

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