Adding image to canvas on click of that image?

Question

0.00/5 (No votes)

See more:

I have cnavas design which looks like girl body,when i click on any image like (fabric,blouse) then that image will fill on that design. if i click fabric then it fill on sleeve part of design,if i click blouse then it fill in body part.
for reference here is link
http://www.houseofblouse.com/design/u-neck-2[^]
here is my design which is for girl body part

XML

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="700" height="800"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(3, 20);
      context.lineTo(10, 200);
      context.stroke();
 context.beginPath();
      context.moveTo(155, 20);
      context.lineTo(150, 200);
      context.stroke();
context.beginPath();
      context.moveTo(10, 200);
      context.lineTo(150, 200);
      context.stroke();
context.beginPath();
      context.moveTo(3, 20);
      context.lineTo(45, 20);
      context.stroke();
context.beginPath();
      context.moveTo(155, 20);
      context.lineTo(110, 20);
      context.stroke();
context.beginPath();
      context.moveTo(45, 20);
      context.bezierCurveTo(48, 80, 110, 80, 110, 19);
      context.stroke();
    </script>
  </body>
</html>

Posted 29-Oct-15 19:45pm

Hussain Javed

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Patrice T · Answer 1 · 2015-10-29T19:57:00

Solution 1

You can use the html drawImage method.
http://www.w3schools.com/tags/canvas_drawimage.asp[^]

To know what your code is doing, use the debugger which will show you exactly what your code is doing and don't.
Run your code step by step to see what it is really doing.
put a breakpoint on the drawImage function and the debugger will show you when it is executed.

Posted 29-Oct-15 19:57pm

Patrice T

Updated 30-Oct-15 8:27am

v2

Comments

Hussain Javed 30-Oct-15 2:12am

I have used drawImage method but it is not working
here is my code
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="700" height="800"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sticky = new Image();
sticky.src = "image.jpg";
context.beginPath();
context.moveTo(210, 150);
context.lineTo(230, 300);
context.stroke();
context.beginPath();
context.moveTo(390, 150);
context.lineTo(370, 300);
context.stroke();
context.beginPath();
context.moveTo(230, 300);
context.lineTo(370, 300);
context.stroke();
context.beginPath();
context.moveTo(210, 150);
context.lineTo(270, 150);
context.stroke();
context.beginPath();
context.moveTo(390, 150);
context.lineTo(330, 150);
context.stroke();
context.beginPath();
context.moveTo(270, 150);

context.bezierCurveTo(240,220, 360, 220, 330, 150);
context.stroke();
context.beginPath();
context.moveTo(210, 150);
context.lineTo(180, 500);
context.stroke();
context.beginPath();
context.moveTo(223, 250);
context.lineTo(200, 500);
context.stroke();

context.beginPath();
context.moveTo(390, 150);
context.lineTo(420, 500);
context.stroke();
context.beginPath();
context.moveTo(377, 250);
context.lineTo(400, 501);
context.stroke();
var test="image.jpg";
context.fillStyle = "test";

context.beginPath();
context.moveTo(230, 300);
context.lineTo(230, 501);
context.stroke();
context.beginPath();
context.moveTo(370, 300);
context.lineTo(375, 501);
context.stroke();
$( "#img1" ).click(function(){
context.drawImage(sticky, 0, 100);
});

</script>

<img src="image.jpg" id="img1" width="50" height="40"/>
</body>
</html>

Patrice T 30-Oct-15 14:22pm

Is it not working ? or you don't know what is doing your code ?

Hussain Javed 30-Oct-15 3:33am

Have you seen my code

Patrice T 30-Oct-15 14:18pm

If you want fast solutions, look for paid services.

Hussain Javed 30-Oct-15 5:46am

can you give any example for this problem