Добавить динамические формы в изображении с помощью javascript или jquery

Question

Я хочу добавить динамические формы, такие как круг, прямоугольник, линия, овал и т. Д. На изображении, используя jquery-плагин или javascript. Для экс:

В этом изображении динамический текст можно создать с помощью записи в текстовом поле несколько этот тип же я хочу сделать для добавления формы

У меня есть исследование его в другой веб-сайт программного обеспечения, но там отмечает, что соответствующий результат наступил. Пожалуйста, дайте мне некоторый намек на решение этой проблемы.

для демонстрации вы можете передать ссылку

http://www.printo.in =>http://www.printo.in/translucent-cards-single-sided-translucent-card-ss-blank-4552

http://www.vistaprint.in =>http://www.vistaprint.in/studio.aspx?template=471103%7es1_AHT_023&ag=True

Advance благодарно.

Answer 1

Используйте элемент HTML5 <canvas></canvas>.

<canvas id="myCanvas" width="578" height="200"></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 
     var radius = 70; 

     context.beginPath(); 
     context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = 'green'; 
     context.fill(); 
     context.lineWidth = 5; 
     context.strokeStyle = '#003300'; 
     context.stroke(); 

     //On mouse events on the canvas 
     $canvas.mousedown(function(e) { 
     lastEvent = e; 
     mousedown = true; 
     }).mousemove(function(e) { 
     //Draw lines 
     if(mousedown) { 
     ctx.beginPath(); 
     ctx.moveTo(lastEvent.offsetX, lastEvent.offsetY); 
     ctx.lineTo(e.offsetX, e.offsetY); 
     ctx.strokeStyle = color; 
     ctx.stroke(); 
     lastEvent = e; 
     } 
    }).mouseup(function() { 
     mousedown = false; 
    }).mouseleave(function() { 
     $canvas.mouseup(); 
    }); 

    </script>