Search code examples
javascripthtmlcanvas2dmakehuman

html5 canvas 2d make human body and fill region

I need to draw a man and then according to some data from server picture his injured body parts ( hand, leg and so on). human semple

I haven't found some ready- made decision for this. I have only small algoritm how to fullfill it.

  1. Take an image of a man and put canvas on the background.
  2. To write functions that would have positioning data of some needed body part to picture it.

Please, prompt whether it seems normal. Maybe, there is more simple way. I would appreciate some links with example of fullfilment of this idea.

Solution

  • I have never worked with SVG

    Don't worry SVG are nearly identical to HTML, there are different tags/properties and such of course,. But if you can handle HTML your not a million miles away from been able to manipulate SVG's.

    For example here, to keep things really simple I've made two rounded squares, and I've even used CSS to colour them. I've even used the good old :hover pseudo class with CSS animation's to make the hover effect. And of course you can even use Javascript to make changes, even getting data from an Ajax query etc.

    What's really neat, is you can use something like Adobe Illustrator, InkScape or any Vector drawing tool that supports SVG to make them, there are even Online SVG drawing tools you can use. You then can just copy paste the SVG text, add classes like, .leftArm, .torso etc, and use all your normal javascript tools to add classes, remove them etc. If you like jQuery can even use that to make changes.

    And finally SVG are scalable, so there already Retina Display capable. IOW: They will look fantastic on any device.

    .hover-check {
  fill: navy;
  transition: fill 1s ease;
}

.hover-check:hover {
  fill: red;
}
    <svg width="220" height="100" viewBox="0 0 220 100"
     xmlns="http://www.w3.org/2000/svg">
  <rect class="hover-check" x="0" y="0" width="100" height="100" rx="15" ry="15"/>
  <rect class="hover-check" x="120" y="0" width="100" height="100" rx="15" ry="15"/>
</svg>