How to paint a continuous circular pattern with html5 canvas

Question

i have this image:

plain sleeves

and i want to draw with the image karo pattern as the pattern. When i did i got a result on the canvas like this:

karo pattern over sleeves

but i need the output to be

sleeves with aligned karo pattern

So my question is:

How do I curve the pattern like this?

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('https://i.stack.imgur.com/mLgiX.png', '30');
            draw_on_cloth("f6258182013", 'https://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

Off the top of my head, you may switch to a polar-coordinate system. Much easier that way to draw along a "curvature". [This(https://github.com/lsauer/vector-js) script] may also help you in the conversion. — Lorenz Lo Sauer, Aug 25 '13 at 10:12
If you can provide an image which gives the direction information at each point you can generalise this. E.g. Red channel = x coordinate, green channel = y coordinate. Then have a repeating gradient which follows the shape you want, and render by getting the data as an array, modifying it manually and putting it back (or use a custom shader but they're not properly supported yet). You could even keep using one image, using blue as luminosity and alpha as alpha. — Dave, Aug 25 '13 at 10:25
See my answer here: http://stackoverflow.com/questions/18428355/how-to-bend-curve-a-image-in-html5-canvas/18431486#18431486 — markE, Aug 25 '13 at 17:03
Just check this link http://stackoverflow.com/questions/18811066/how-to-fill-pattern-in-canvas-and-curving-along-the-shape — ANit, Sep 27 '13 at 10:32
http://stackoverflow.com/questions/18811066/how-to-fill-pattern-in-canvas-and-curving-along-the-shape — ANit, Sep 27 '13 at 10:36
Can somebody help me, I want to achieve this only, I tried too hard, nut unable to complete elbow curve part. Help me for this. @MDTAHMIDHOSSAIN — Mohammed, Mar 09 '17 at 11:48
@Mohammed "Html canvas is just not a good tool to do what you desire. " — MD TAHMID HOSSAIN, Mar 23 '17 at 11:29

score 0 · Accepted Answer · answered Aug 25 '13 at 17:24

0

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

What they do is show a nice sample shirt along with a series of color swatches.

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

Alternatively, use a 3D modeling program where you can wireframe your shirt, then bend that wireframe and finally apply texture maps over the wireframe.

Html canvas is just not a good tool to do what you desire.

answered Aug 25 '13 at 17:24

markE

102,905
11
164
176

1

If you recommend to create a 3D model of the shirt and apply the pattern texture on it, one can do that in JavaScript as well and draw it on HTML ` – Bergi Aug 25 '13 at 18:40
I was thinking more of using something like Blender armatures to create a wireframe of "arm-with-bent-elbow". Then apply texture to that wireframe so the OP's checkerboard pattern would curve with the bent arm. Anyway, I can't think of any reasonably simple 2d canvas trick that would produce a good result using canvas alone. – markE Aug 25 '13 at 18:54
i might have to move in webgl. – MD TAHMID HOSSAIN Sep 02 '13 at 13:07

How to paint a continuous circular pattern with html5 canvas

1 Answers1

Linked