<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div align=”center”> <canvas id=”myCanvas” width=”578″ height=”400″></canvas> </div> <script> var canvas = document.getElementById(‘myCanvas’); var context = canvas.getContext(‘2d’); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 69, 50); }; imageObj.src = ‘url of the image’; […]

draw image on canvas in html

<img usemap=”#map” src=”wp-content/uploads/2015/02/all.png” ┬áborder=”0″ alt=”social icons” title=”social icons” /> <map id=”map” name=”map”> <area shape=”rect” alt=”” title=”facebook” coords=”22,22,115,115″ href=”” target=”_blank” /> <area shape=”rect” alt=”” title=”twitter” coords=”150,22,240,110″ href=”” target=”_blank” /> <area shape=”rect” alt=”” title=”linkedin” coords=”18,140,122,241″ href=”” target=”_blank” /> <area shape=”rect” alt=”” title=”gplus” coords=”243,141,139,241″ href=”” target=”_blank” /> </map>

Image mapping : multiple links on single image