Tuesday, February 6, 2018

Svg vs canvas (basics)

Svg is the recommended W3C standard for graphics in a Web page.
Its use requires that we use the svg tag, and define a space for our element;
If the space is too small, the element will not show. In our example, we have
a center at (50,50) and a radius of 40 (pixels).The space is thus defined from
(0,0) at top left with positive increments going right and down. Svg deals in paths,
so that here the sides to a figure are referred to with 'stroke'. I have reduced the
width of the svg space from 100 to 50, and half our circle is gone!!






source: W3 Schools                                      

 *     *     *

Working with canvas is different, in that one is using JavaScript
to tell the computer what to do. One positions the canvas with CSS,
and it becomes a space with (0,0) at the top left, but the styling terms are
strokeStyle for color, and lineWidth for pixels. And one needs to start
the ctx and - eventually - tell it to draw what we want with a command
of ctx.stroke().


 source: https://www.html5canvastutorials.com/tutorials/html5-canvas-line-width/                           

No comments: