JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="mr_rotator_can" width="325" height="385"></canvas>
<canvas id="base" width="325" height="385"></canvas>
CSS
canvas {
border: #666 0px solid;
}
#mr_rotator_can{ display:none;}
JavaScript
$(document).ready(function () {
texture_can('http://aldobonelli.it/configuratore/tessuto12.png');
draw_on_cloth("base",'http://aldobonelli.it/configuratore/assets/base2.png', "mr_rotator_can");
});
function texture_can(image) //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.fill();
};
imageObj_rotator3.src = image;
}
function draw_on_cloth(var1, var2, var3) //var1=the output canvas var2=body part var3= mr_rotator_can
{
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);
temp_fun_canvas_ctx.drawImage(fimg, 0, 0);
};
fimg.src =...