How to draw a solid round html5 canvas pattern

Question

I have this image:

and I want to paint with an image like a template. When I got the result on canvas as follows:

but i need a conclusion

So my question is:

HTML

<canvas id="mr_rotator_can" width="436" height="567"></canvas> <canvas id="f6258182013" width="436" height="567"></canvas> 

Js

  var source, source_ctx, sleeve, sleeve_ctx, finalsleeve, finalsleeve_ctx, temp_can1, temp_can1_ctx; $(document).ready(function () { temp_can1 = document.getElementById('f6258182013'); temp_can1_ctx = temp_can1.getContext('2d'); rotator3('http://i.stack.imgur.com/mLgiX.png', '30'); draw_on_cloth("f6258182013", 'http://i.stack.imgur.com/1j8Dw.png', "mr_rotator_can", "img_fastening1a"); }); function rotator3(var2, var3) //var2=image aka pattern var3= angle for rotate { var mr_rotator_var = document.getElementById('mr_rotator_can'); var mr_rotator_var_ctx = mr_rotator_var.getContext("2d"); mr_rotator_var.width = mr_rotator_var.width; var imageObj_rotator3 = new Image(); imageObj_rotator3.onload = function () { var pattern_rotator3 = mr_rotator_var_ctx.createPattern(imageObj_rotator3, "repeat"); mr_rotator_var_ctx.fillStyle = pattern_rotator3; mr_rotator_var_ctx.rect(0, 0, mr_rotator_var.width, mr_rotator_var.height); mr_rotator_var_ctx.rotate(var3 * Math.PI / 180); mr_rotator_var_ctx.fill(); }; imageObj_rotator3.src = var2; } function draw_on_cloth(var1, var2, var3, var4) //var1=the output canvas var2=body part var3= mr_rotator_can var4=image tag { debugger; var temp_fun_canvas = document.getElementById(var1); var temp_fun_canvas_ctx = temp_fun_canvas.getContext("2d"); temp_fun_canvas.width = temp_fun_canvas.width; var fimg = new Image(); fimg.onload = function () { temp_fun_canvas_ctx.drawImage(fimg, 0, 0); temp_fun_canvas_ctx.globalCompositeOperation = "source-atop"; var pattern = temp_fun_canvas_ctx.createPattern(mr_rotator_can, 'repeat'); temp_fun_canvas_ctx.rect(0, 0, mr_rotator_can.width, mr_rotator_can.height); temp_fun_canvas_ctx.fillStyle = pattern; temp_fun_canvas_ctx.fill(); temp_fun_canvas_ctx.globalAlpha = .10; temp_fun_canvas_ctx.drawImage(fimg, 0, 0); temp_fun_canvas_ctx.drawImage(fimg, 0, 0); temp_fun_canvas_ctx.drawImage(fimg, 0, 0); }; fimg.src = var2; } 

Here is what I have done so far on JSFiddler

Answer 1

Take a lesson from a company that sells a large number of t-shirts online - Walmart.

What they do is show a nice shirt with a swatch and a series of color swatches.

Alternatively, take digital photographs of any shirts that are difficult to computer, like your checkered pattern.

Alternatively, use a 3D modeling program in which you can frame your shirt, then bend that frame and finally apply texture maps on top of the frame.

Html canvas is simply not the best tool to accomplish what you want.