Add content on an image with canvas

Question

You could accomplish your task in many ways.

Here's an example using your html canvas suggestion of an image drawn on canvas without arrows and then using canvases drawing commands to apply the arrows:

http://jsfiddle.net/m1erickson/u8TCv/

enter image description here

Example code:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/emission.png";
    function start(){
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);
        drawArrow(91,166,56,36,15,"C");
    }

    function drawArrow(x,y,w,h,pointWidth,text){
        // arrow
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+pointWidth,y-h/2);
        ctx.lineTo(x+w,y-h/2);
        ctx.lineTo(x+w,y+h/2);
        ctx.lineTo(x+pointWidth,y+h/2);
        ctx.closePath();
        ctx.fillStyle="black";
        ctx.fill();
        // text
        ctx.font="36px arial black";
        ctx.fillStyle="white";
        ctx.fillText(text,x+pointWidth+5,y+h/3);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>