Starting Canvas Woes !

[Siberian]

Canvas won't draw a line ?

[pixelsoul]

Of course it won't, when it's incomplete.
https://jsfiddle.net/axboxp2e/2/

http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

[Siberian]

I got another issue here ?

If you have canvas within a div or what have you, can you not see or build a template coordinate system ?

[ryantroop]

The canvas is a coordinate system. It is entirely pixel based (I may be over simplifying..), and it starts at left 0,0.

[Siberian]

I mean, if I want to translate a line, shape, I can see where to precisely position ?

[Siberian]

Update, new path is not being written ?

[Siberian]

solve that issue above :)

[Siberian]

How can I prevent transform from being cumlative, move a path independantely of other paths ? do I have to save the canvas ?

[Siberian]

This only tells me I have to save the canvas, I can't move a path independently ?

// Draw new path
context.beginPath();
context.translate(45,60);
context.strokeStyle = "blue";
context.lineCap = "round";
context.moveTo(20,12);
context.lineTo(120,120);
context.lineTo(80,12);
context.lineWidth=20;
context.closePath();
context.fillstyle = "orange";
context.fill();
context.translate(34,12);
context.stroke();

[ryantroop]

On a canvas, once the pixels are drawn they are permanent, and reference to the individual line draw is lost. If you want to modify individual points you have a few options.

• Create new canvas layers for each draw pass
• keep an array of points (but this still leaves a lot of other logistics to figure out)
• use SVG instead.

[Siberian]

Out of courosity, how do you keep an array of points ?

[ryantroop]

The canvas is simply a grid. 0,0 -> whatever you define.
Since you know this, you can keep, say, an object that has each item being an array of points:

obj = { Line1: [{0,0}, {5,5}, {16,16}]};

You can obviously expand on this simple construct and have a line weight, color, etc... whatever. Basically, though, you have your needed info right there. If you want to move said line - you would have to figure out if an area you clicked on contains content (is it transparent or filled?), and then run through your map and find what crosses those points.

This gets super complex (you would actually have to keep an array of all pixels drawn for this to work, I think), and it's the reason I prefer SVG for content that needs to be edited post rendering.

The more realistic option is to make a new canvas layer for each drawing and have them stack and maintain their own handlers. It still gets very messy and hard to maintain, in my opinion. Others who may be much more clever, experienced, or smarter than I have probably done it.

[Siberian]

Each object has to be an array of points, correct ? My goal is to create a grow effect using an image, the image will duplicate and grow along a bezier path then I'll want another layer with another set of an image ontop that will follow along the first path.

No SVG library can do this; I have exhasted all options, that includes asking around the internet, the only option that I keep getting directed to is canvas, and only canvas, otherwise I'd have to change the design plan again, and I'm beginning to get frusterated with changing a web page design because of technological restrictions.

[Siberian]

That and, I'm out of ideas for the design theme :( :) For most other things, a SVG Library or equal library will fill in the blanks.

Another issue is, it has to scale the same effect from Mobile <> Desktop.

[ryantroop]

Do you have a real world example of your goal? Or a mock up? Not sure what you are envisioning.

Side note: SVG = Scalable Vector Graphics. It's sole purpose is to be a graphic that is scalable.

[Siberian]

If you know how a vine grows, that is basically the effect, a growing vine, with smaller vines that break out. The twist is, the vine can't be a consistant straight line it has to change it's width as it grows, that's where, I've been told to use canvas. As SVG will only do a constant line, with no thickness.

[ryantroop]

I dont mean to ruin your day, but Flash may be better suited to your goal. It is the best of both worlds (SVG and Canvas) and has built in ECMA support for doing things like fractal art.

If you are dead set on using canvas, the only way I can think of doing what you are doing is to use the canvas itself as a pixel map, and then figuring out what you want to do artistically based on what colors (or fill) is at any given pixel position. You will likely have to keep track of special "root" points that represent the base or stem of your drawing, which you can then refer to when growing or shrinking your lines.

Alternatively, with SVG - you can use polylines (which are just a series of points) and give them thicknesses, and have multiple lines with multiple thicknesses being drawn as an overlay. You can also do them point by point as you would a canvas (but that would be obnoxious). With SVG you can also try using CSS (or CSS Like) transforms and other visual "tricks" to accomplish your goal... that's an interesting problem to solve..

[Siberian]

Alternatively, with SVG - you can use polylines (which are just a series of points) and give them thicknesses, and have multiple lines with multiple thicknesses being drawn as an overlay

Do you have any examples; or know of any examples ?

CSS Transforms, never thought of, well I did, and was informed, it would be next to impossible. Examples would help if you know of any ?

[ryantroop]

http://www.w3schools.com/svg/svg_polyline.asp

You will notice the line has a "stroke" which basically maps to thickness in pixels.

However, I really think you are looking for stuff like...
http://svgopen.org/2010/papers/28-Fractals_Visualization_Using_SVG/
http://codepen.io/collection/aBwGo/

Or, if you prefer a flash version..
http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/exercises/vineMask.php

You will likely be using similar methods of creation no matter the platform (other than a canvas, since that will be entirely pixel based). With SVG you will not be able to do multi-thickness lines, but instead can create <g> (groups) that can render as you want them to, and using masks or other tweening concepts (animation techniques) you can achieve your desired result.

Hope that is what you are looking for.

[ryantroop]

This may also be of interest...
https://jroatch.nfshost.com/2012/svg-a-day/complex-star-morph.svg

[Siberian]

The flash version is exactly what I want to do :) Masking and clipping in CSS, if that is what you meant, doesn't work across all browsers, that will be a problem if that is the only route.

I'm going to look into different techniques,

Thanks for informing me that SVG won't be able to do multi-line thickness :)