Html5 canvas samples part 6

Published on May 14 2015 by Yousfi Benameur

This is yet the part 6 of the html5 canvas samples.let we continuig our advanced in unknown lands!

the subjects studied here ( more 45 codes) are the follow:

-Gradients samples
-texts animations
-lines animation
-Drawings & animations
-Blur image animated
-ThreeJS library animations
-Animations: -draw and anim gauge
                       -draw rains and anim
                       -StopWatch (css)
                       -Noise simulation
                       -Sphere particles
                      -Cube mesh animated
-Rotate drawings with no trail
-Draw text on image
-Masking
-Context font use.
-Compositing
-Keyboard events and drawings on canvas
-Polygons-stars drawings with gradients fills.
-11 pencils samples drawings (with brushes,pattern,gradients)
-Drag & drop with canvas
-Some drawings, images resizing & antialiasing

see the screenshots below of what the application does.

As i said in preview canvas posts , some samples are adapted from great web tutoriels to bring something consistent to vfp users.If the case, its pointed to the author or site in the code.

This code works only from the vfp webBrowser emulated (tested on IE11 emulation).

All is tested on Windows8.1 only.

-The code have a new powerfull method to capture the canvas drawings with a modal dialog box.Simply press CTRL+C (vfp _cliptext works with web page clipboard) to capture the encoded64 image and open it with MSpaint(can resize, recolor,save as another format...)
If the dialog box dont appear that want to say impossible to capture the canvas (if you continue,you have a blank image).
Note that the canvas background is not captured.Must make custom context background with the javascript code (script) before you start any drawing (the background is always on bottom):

var canvas=document.getElementById('ycanvas1'); //point to the canvas object by its id
var ctx=canvas.getContext('2d'); //get the context for drawing
ctx.fillStyle="navy"; //color you want to install as real & exportable background.

ctx.clearRect(0,0,canvas.width,canvas.height); //clear the context canvas
ctx.fillRect(0,0,canvas.width,canvas.height) //fill with the color specified

(warning javascript is sensitive)

This is used in preview post:http://yousfi.over-blog.com/2015/05/texts-worshop-on-html5-canvas.html

trick:in the app and after showing image in mspaint , unselect;rightclick menu and invert color to make a new background.
Note that also if you draw an image+some drawings you cannot capture by this method the canvas...

-The full resizing canvas makes some area and disappear the form buttons.Choose restore button of window form to return to the first situation.

I joigned some js files to make the demo applications as THreeJS or blur images running.

If you have some problems simply clear the document to make it rebuild and run the menu.

Some links need internet to be connected(web images...) and as you can see javascript dont work great on local for security goals.Its configured to play mainly on the web.

Download the zip below : there is a visual form and its equivalent as prg.run one of these and please report any bug.