Awesome html5 canvas animations - part3

Published on May 26 2015 by Yousfi Benameur

A simple and fast library to allow pseudo 3D graphics to be rendered onto a 2D canvas.
The canvas K3D JavaScript programming libraries by Kevin Roast supports wireframes and polygons with depth cue shading, animation with motion blur, and texture mapping with a lighting model in three dimensions using HTML 5 canvas graphics
This code uses yet the K3D library to make animations on 6 objects.
Click on any object to animate it.

1-snake of flying 3D cubes - wireframe rendering, depth-cued shading
2-Sphere of points - motion blur point rendering, depth-cued shading
3--Sphere spiral - motion blur wireframe rendering, depth-cued shading
4-- Icosahedron - solid rendering, single lightsource shading
5--Tesselated Sphere - solid rendering, multiple colour lightsource textured shading
0-All these 5 objects gathered as original (the 5 objects are also extracted individually ).see how its done in the code.

before running the code (tested on ie11 emulation) download the 8 images below and put them in images folder (in the source as this prg).
the free libraries (js files) are linked directly to author site.(can download and run all locally on disc.)
http://www.kevs3d.co.uk/dev/canvask3d (see download).
Internetexplorer.application is used to this demo.(ie11 emulation supports html5 canvas).Select the code and paste into a prg and run.
*Internet must be connected to work with web libraries and resources.

All is tested on Windows8.1 only.
Run vfp9.exe as administrator to avoid some priveleges problems.

*1*
*folder images must be in source mandatory-the JS file demo links to it.

Local m.xx,m.yy
m.xx=Int(Val(Inputbox("ALL(0),Snake(1),sphere (2),iso(3),spirale(4),Tesselated Sphere(5)","K3D library","0")))
If ! Between(m.xx,0,5)
    m.xx=0
Endi

m.yy=''
If !m.xx=0
	TEXT to m.yy noshow
canvas2.width=2*canvas2.width
canvas2.height=2*canvas2.height

canvas3.width=2*canvas3.width
canvas3.height=2*canvas3.height

canvas4.width=2*canvas4.width
canvas4.height=2*canvas4.height

canvas5.width=2*canvas5.width
canvas5.height=2*canvas5.height

	ENDTEXT
Endi

Local mx1,m.x2,m.x3,m.x4,m.x5
m.x1=[document.getElementById("canvas1").style.display="none";]
m.x2=[ document.getElementById("canvas2").style.display="none";]
m.x3=[ document.getElementById("canvas3").style.display="none";]
m.x4=[ document.getElementById("canvas4").style.display="none";]
m.x5=[ document.getElementById("canvas5").style.display="none";]

Do Case
	Case m.xx=0
		m.x1=Strtran(m.x1,"none","")
		m.x2=Strtran(m.x2,"none","")
		m.x3=Strtran(m.x3,"none","")
		m.x4=Strtran(m.x4,"none","")
		m.x5=Strtran(m.x5,"none","")

	Case m.xx=1
		m.x1=Strtran(m.x1,"none","")
		m.x2=m.x2
		m.x3=m.x3
		m.x4=m.x4
		m.x5=m.x5

	Case m.xx=2
		m.x1=m.x1
		m.x2=Strtran(m.x2,"none","")
		m.x3=m.x3
		m.x4=m.x4
		m.x5=m.x5


	Case m.xx=3
		m.x1=m.x1
		m.x2=m.x2
		m.x3=Strtran(m.x3,"none","")
		m.x4=m.x4
		m.x5=m.x5

	Case m.xx=4
		m.x1=m.x1
		m.x2=m.x2
		m.x3=m.x3
		m.x4=Strtran(m.x4,"none","")
		m.x5=m.x5

	Case m.xx=5
		m.x1=m.x1
		m.x2=m.x2
		m.x3=m.x3
		m.x4=m.x4
		m.x5=Strtran(m.x5,"none","")
Endcase

TEXT to m.myvar textmerge noshow

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
      <title>K3D - 3D rendering in HTML5 Canvas and JavaScript</title>       
   
      <script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/mathlib-min.js"> </script >              
   

      <script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3d-min.js"> </script >              
   

      <script src="http://www.kevs3d.co.uk/dev/canvask3d/scripts/k3ddemos.js"> </script >      
      

      <style type="text/css">
         body { font-family: Arial, Helvetica; color: black }
         .title { padding: 8px; text-align: center; font-weight: bold; font-size: 1.2em; color: darkblue }
         P { padding-left: 2em; padding-top: 0; line-height: 1em; font-size: 0.75em }
         P.left { padding-left: 1em; line-height: 1em }
         a, a:visited, a:active, a:hover { color: #000088 }
         .button-overlay { position: absolute; right: 1em; }
      </style>
   </head>


 <body style="margin:20px; overflow:hidden;background-color:black;" scroll="no"  oncontextmenu="window.close();return false;" onload="onloadHandler();">
      <div style="text-align:center">
         <h2 style="color:white;">K3D HTML5 Canvas Demos</h2>

   <center>
          <div style="width:240;display:inline-block">
            <canvas id="canvas2" width="240" height="240" title="Sphere of points - motion blur point rendering, depth-cued shading" style="background-color:#000000" > </canvas >
            <br>
            <canvas id="canvas3" width="240" height="240" title="Icosahedron - solid rendering, single lightsource shading"> </canvas >     
         </div>
         <div style="background:url(http://www.kevs3d.co.uk/dev/canvask3d/images/peppers.png) no-repeat 0px 0px;display:inline-block" >       
            <canvas id="canvas1" width="480" height="480" title="A snake of flying 3D cubes - wireframe rendering, depth-cued shading" > </canvas >        
         </div> 
         <div style="width:240;display:inline-block">
            <canvas id="canvas4" width="240" height="240" title="Sphere spiral - motion blur wireframe rendering, depth-cued shading" style="background-color:#000000" ></canvas >     
            <br>
            <canvas id="canvas5" width="240" height="240" title="Tesselated Sphere - solid rendering, multiple colour lightsource textured shading" ></canvas >
         </div>
         <div>

</center>

  <center> <p style ="color:white;">Click to animate object-RightClick to exit.</p></center>
         </div>
      </div>

	  <script>
	  <<m.x1>>
	  <<m.x2>>
	  <<m.x3>>
	  <<m.x4>>
	  <<m.x5>>
<<m.yy>>

	  </script>
</body>
</html>
ENDTEXT
Local m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Safe Off
lcdest=m.yrep+"ytest.html"
Strtofile(m.myvar, m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer

apie=Newobject("internetexplorer.application")

With apie
	.Navigate(lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	.Visible=.T.
	BringWindowToTop(.HWnd)
	SetWindowText(.HWnd, "k3D demo animations")
	.Visible=.T.
Endwith

Download these 8 images and put them in images folder (in source).they work as resources for the library.

Download these 8 images and put them in images folder (in source).they work as resources for the library.

 
Below 6 (+1updated) codes for animations on html5 canvas.

1-fireWorks
2-clock (customizable parameters in code)
3-mouse effect  circles trails
4-system solar-eath-moon simulation on canvas
5-free drawing with mouse.
6-mouse object creation  with lifecycles
all use internetexplorer.application (emulated ie11).
see some screenshots below.

*2*yfireworks.prg
local m.myvar
TEXT to m.myvar noshow
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fireworks!</title>
        <style type="text/css">
            body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
            }
        </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script>
    </head>
 <body  bgcolor="black"  scroll="no"  oncontextmenu="window.close();return false;" >
<script>
var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    mousePos = {
        x: 400,
        y: 300
    },
    // create canvas
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    particles = [],
    MAX_PARTICLES = 300;

// init
$(document).ready(function() {
    document.body.appendChild(canvas);
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    setInterval(loop, 1000 / 30);
});

$(document).mousemove(function(e) {
    e.preventDefault();
    mousePos = {
        x: e.clientX,
        y: e.clientY
    };
});

function loop() {
    // update screen size
    if (SCREEN_WIDTH != window.innerWidth) {
        canvas.width = SCREEN_WIDTH = window.innerWidth;
    }
    if (SCREEN_HEIGHT != window.innerHeight) {
        canvas.height = SCREEN_HEIGHT = window.innerHeight;
    }

    // clear canvas
    context.fillStyle = "rgba(0, 0, 0, 0.1)";
    context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

    makeParticle(5);

    var existingParticles = [];

    for (var i = 0; i < particles.length; i++) {
        particles[i].update();

        // render and save particles that can be rendered
        if (particles[i].exists()) {
            particles[i].render(context);
            existingParticles.push(particles[i]);
        }
    }

    // update array with existing particles - old particles should be garbage collected
    particles = existingParticles;

    while (particles.length > MAX_PARTICLES) {
        particles.shift();
    }
}
function makeParticle(count) {
    for (var i = 0; i < count; i++) {
        var particle = new Particle(mousePos);
        var angle = Math.random() * Math.PI * 2;
        var speed = Math.random() * 10 + 2;

        particle.vel.x = Math.cos(angle) * speed;
        particle.vel.y = Math.sin(angle) * speed;

        particle.size = 10;

        // particle.fade = 0.02;
        particle.gravity = 0.2;
        particle.resistance = 0.92;
        particle.shrink = 0.92;

        particle.flick = true;

        particles.push(particle);
    }
}
function Particle(pos) {
    this.pos = {
        x: pos.x,
        y: pos.y
    };
    this.vel = {
        x: 0,
        y: 0
    };
    this.shrink = .97;
    this.size = 2;

    this.resistance = 1;
    this.gravity = 0;

    this.flick = false;

    this.alpha = 1;
    this.fade = 0;
    this.color = Math.floor(Math.random() * 360 / 10) * 10;
}

Particle.prototype.update = function() {
    // apply resistance
    this.vel.x *= this.resistance;
    this.vel.y *= this.resistance;

    // gravity down
    this.vel.y += this.gravity;

    // update position based on speed
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;

    // shrink
    this.size *= this.shrink;

    // fade out
    this.alpha -= this.fade;
}
Particle.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }

    c.save();

    c.globalCompositeOperation = 'lighter';

    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;

    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
    gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
    gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");


    c.fillStyle = gradient;

    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();

    c.restore();
}

Particle.prototype.exists = function() {
    return this.alpha >= 0.01 && this.size >= 1;
}
</script>
<center><p style="color:white;">Mousemove on the screen to see the effect.Rightclick to close the window.</p></CENTER>
    </body>
</html>
ENDTEXT
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")

With apie
    .Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

*3*yclock.prg
Declare Integer Sleep In kernel32 Integer
Local apie
apie=Newobject("internetexplorer.application")
Sleep(200)

Local colCircle1,colCircle2,gradu,colText      &&can customize here these properties
colCircle1='#16b'
colCircle2='#05a'
gradu='gold'
colText='white'

TEXT to m.myvar textmerge noshow
<!DOCTYPE HTML>
<html>
 <body  bgcolor="black"  scroll="no"  oncontextmenu="window.close();return false;" onload="init();">
 <canvas id="ycanvas1" width="<<sysmetric(1)>>"  height="650" style="background-color:black;"></canvas>

<script>
function init(){
    drawHands();
    setInterval('drawHands()',1000);
}

function drawHands(){
    var canvas = document.getElementById('ycanvas1');

    var ctx = canvas.getContext('2d');
    var x=500;
    var y=300;
    var r=x*0.5;

    var d = new Date();
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();

    ctx.clearRect(0,0,400,400);

    //draw background
    ctx.save();
    ctx.translate(x,y);
    var grad = ctx.createLinearGradient(-r,r,r,-r);
    grad.addColorStop(0,'rgb(128,128,128)');
    grad.addColorStop(0.5,'rgb(255,255,255)');
    grad.addColorStop(1,'rgb(128,128,128)');
    ctx.beginPath();
    ctx.fillStyle = grad;
    ctx.arc(0,0,r,0,Math.PI*2,false);
    ctx.fill();

    grad = ctx.createLinearGradient(-r,-r,r,r);
    grad.addColorStop(0,'rgb(128,128,128)');
    grad.addColorStop(0.5,'rgb(255,255,255)');
    grad.addColorStop(1,'rgb(128,128,128)');
    ctx.beginPath();
    ctx.fillStyle = grad;
    ctx.arc(0,0,r*0.85,0,Math.PI*2,false);
    ctx.fill();

    ctx.beginPath();
    ctx.fillStyle ='<<colCircle1>>';                           //cercle 1
    ctx.arc(0,0,r*0.8,0,Math.PI*2,false);
    ctx.fill();

    ctx.beginPath();
    ctx.fillStyle = 'colCircle2';                           //petit cercle 2
    ctx.arc(0,0,r*0.4,0,Math.PI*2,false);
    ctx.fill();
    ctx.restore();

    //draw index
    ctx.save();
    ctx.translate(x,y);
    ctx.fillStyle = '<<gradu>>';                         //graduations+hours+minutes
    for(var i=0;i<12;i++){
        ctx.rotate(Math.PI/6);
        ctx.fillRect(-r*0.04/2,-r*0.75,r*0.04,r*0.2);
    }
    ctx.restore();

    //draw text
    ctx.save();
    ctx.translate(x,y);
    ctx.fillStyle = '<<colText>>';                                   //filltext
    ctx.font = (r*0.45/5)+"px serif";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('TIME FOX',0,r*0.45);
    ctx.restore();

    //draw hour hand
    ctx.save();
    ctx.translate(x,y);
    ctx.beginPath();
    ctx.rotate((h/12+m/12/60)*2*Math.PI);
    ctx.strokeStyle = 'gold';   //'white';
    ctx.lineWidth = r*0.02;
    ctx.moveTo(0,0);
    ctx.lineTo(0,-r*0.4);
    ctx.stroke();
    ctx.restore();

    //draw minute hand
    ctx.save();
    ctx.translate(x,y);
    ctx.rotate(m*2*Math.PI/60);
    ctx.beginPath();
    ctx.strokeStyle = 'gold';   //'white';
    ctx.lineWidth = r*0.02;
    ctx.moveTo(0,0);
    ctx.lineTo(0,-r*0.6);
    ctx.stroke();
    ctx.restore();

    //draw second hand
    ctx.save();
    ctx.translate(x,y);
    ctx.beginPath();
    ctx.rotate(s*2*Math.PI/60);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = r*0.01;
    ctx.moveTo(0,r*0.1);
    ctx.lineTo(0,-r*0.7);
    ctx.stroke();
    ctx.restore();

    ctx.save();
    ctx.translate(x,y);
    ctx.beginPath();
    ctx.fillStyle = 'red';
    ctx.arc(0,0,r*0.02,0,Math.PI*2,false);
    ctx.fill();
    ctx.restore();
}
</script>

<Center><p Style="color:white;">Can customize many colors,background pict.. .RightClick To Close the Window.</p></Center>
</body>
</html>
ENDTEXT
Set Safe Off
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)
apie.Navigate(m.lcdest)
Declare Integer BringWindowToTop In user32 Integer

With apie
    .Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

*4*ycircles_trail.prg
TEXT to m.myvar textmerge noshow
<!DOCTYPE HTML>
<html>
 <body  bgcolor="black"  scroll="no"  oncontextmenu="window.close();return false;" >
 <canvas id="ycanvas1" width="<<sysmetric(1)>>"  height="650" style="background-color:black;"></canvas>
<script>
var canvas = document.getElementById("ycanvas1");
var ctx = canvas.getContext("2d");

var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

var dots = [];
var r = Math.floor(Math.random() * 255) + 50;
var g = Math.floor(Math.random() * 255) + 50;
var b = Math.floor(Math.random() * 255) + 50;
var radius = Math.floor(Math.random() * 50) + 10;

function Dot(xCoordinate, yCoordinate, radiusValue, rValue, gValue, bValue, aValue) {
    this.x = xCoordinate;
    this.y = yCoordinate;
    this.radius = radiusValue;
    this.r = rValue;
    this.g = gValue;
    this.b = bValue;
    this.a = aValue;
}

function dotFilter(element) {
    return element.y >= 0 && element.a >= 0;
}

function drawDots() {
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    if (dots.length === 0) {
        return;
    }

    dots = dots.filter(dotFilter);

    for (i = 0; i < dots.length; i = i + 1) {
        dots[i].y = dots[i].y - 1;
        dots[i].a = dots[i].a - 0.05;

        ctx.save();
        ctx.beginPath();
        ctx.arc(dots[i].x, dots[i].y, dots[i].radius, 0, 2 * Math.PI, true);
        ctx.fillStyle = "rgba(" + dots[i].r + "," + dots[i].g + "," + dots[i].b + "," + dots[i].a + ")";
        ctx.fill();
        ctx.restore();
    }
}

canvas.onmousemove = function(e) {
    var mouseX, mouseY;

    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }

    r = Math.floor(Math.random() * 255) + 50;
    g = Math.floor(Math.random() * 255) + 50;
    b = Math.floor(Math.random() * 255) + 50;
    radius = Math.floor(Math.random() * 50) + 10;

    dots.push(new Dot(mouseX - 4, mouseY - 4, radius, r, g, b, 1));
};

function clearScreen() {
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
}

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, canvasWidth, canvasHeight);

window.setInterval(drawDots, 17);
</script>

<center><p style="color:white;">Click +Mousemove on the screen to see the effect.Rightclick to close the window.</p></CENTER>
    </body>
</html>
ENDTEXT

m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")

With apie
    .Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

*5*ysolar.prg
Local apie,m.myvar
apie=Newobject("internetexplorer.application")

TEXT to m.myvar textmerge noshow
<!DOCTYPE HTML>
<html>
 <body  bgcolor="black"  scroll="no"  oncontextmenu="window.close();return false;" onload="init();">
 <canvas id="ycanvas1" width="<<sysmetric(1)>>"  height="650" style="background-color:black;"></canvas>

<script>
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
  window.requestAnimationFrame(draw);
}

function draw() {
  var canvas=document.getElementById('ycanvas1')
  var ctx = canvas.getContext('2d');
canvas.width=640;
canvas.height=640;


  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0,0,canvas.width,canvas.height); // clear canvas

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(canvas.width/2,canvas.height/2);

  // Earth
  var time = new Date();
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  ctx.translate(105,0);
  ctx.fillRect(0,-12,50,24); // Shadow
  ctx.drawImage(earth,-12,-12);

  // Moon
  ctx.save();
  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
  ctx.translate(0,28.5);
  ctx.drawImage(moon,-3.5,-3.5);
  ctx.restore();

  ctx.restore();

  ctx.beginPath();
  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
  ctx.stroke();

  ctx.drawImage(sun,0,0,canvas.width,canvas.height);

  window.requestAnimationFrame(draw);
}

init();
</script>

<Center><p Style="color:white;">Solar -Earth-moon system model .RightClick To Close the Window.</p></Center>
</body>
</html>
ENDTEXT
Set Safe Off
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)
apie.Navigate(m.lcdest)

Declare Integer BringWindowToTop In user32 Integer

With apie
    .Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

*6*yfree_drawing.prg
Local apie,m.myvar
apie=Newobject("internetexplorer.application")

TEXT to m.myvar textmerge noshow
<!DOCTYPE HTML>
<html>
 <body  bgcolor="black"  scroll="no"  oncontextmenu="window.close();return false;" onload="draw();">
 <canvas id="ycanvas1" width="<<sysmetric(1)>>"  height="650" style="background-color:black;"></canvas>


<script>
var canvas = document.getElementById( 'ycanvas1' );
var ctx = canvas.getContext( '2d' ),
    mouseX = 0,
    mouseY = 0,
    level = 0;

function draw(){
  ctx.fillStyle = "hsl("+(level*5)+", 100%, 50%)";
  ctx.beginPath();
  ctx.arc( mouseX, mouseY, 20 , 0, Math.PI*2, true );
  ctx.closePath();
  ctx.fill();
  level++;
}

canvas.addEventListener( 'mousemove', function( event ) {
  if(event.offsetX){
    mouseX = event.offsetX;
    mouseY = event.offsetY;
  } else {
    mouseX = event.pageX - event.target.offsetLeft;
    mouseY = event.pageY - event.target.offsetTop;
  }
  draw();
}, false );
</script>

<Center><p Style="color:white;">Click +MouseMove On the Screen To see the effect.RightClick To Close the Window.</p></Center>
</body>
</html>
ENDTEXT
Set Safe Off
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)
apie.Navigate(m.lcdest)

Declare Integer BringWindowToTop In user32 Integer


With apie
    .Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

*6bis*yfree_drawing_bis.prg---UPDATED------
*the code above is adapted to make drawing only with mouseDown(mouseUPstop drawing).

Local apie,m.myvar
apie=Newobject("internetexplorer.application")

TEXT to m.myvar textmerge noshow
<!DOCTYPE HTML>
<html>
 <body  bgcolor="black"  scroll="no"  oncontextmenu="window.close();return false;" onload="draw();">
 <canvas id="ycanvas1" width="<<sysmetric(1)>>"  height="650" style="background-color:black;"></canvas>


<script>
var canvas = document.getElementById( 'ycanvas1' );
var ctx = canvas.getContext( '2d' ),
    mouseX = 0,
    mouseY = 0,
    level = 0,
    isDrawing;

function draw(){
  ctx.fillStyle = "hsl("+(level*5)+", 100%, 50%)";
  ctx.beginPath();
  ctx.arc( mouseX, mouseY, 20 , 0, Math.PI*2, true );
  ctx.closePath();
  ctx.fill();
  level++;
}

canvas.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX, e.clientY);
};

canvas.onmousemove = function(e) {
  if(event.offsetX){
    mouseX = event.offsetX;
    mouseY = event.offsetY;
  } else {
    mouseX = event.pageX - event.target.offsetLeft;
    mouseY = event.pageY - event.target.offsetTop;
    }
  if (isDrawing) {
   draw();
  }
};

canvas.onmouseup = function() {
  isDrawing = false;
};
</script>

<Center><p Style="color:white;">MouseDown On the Screen To see the effect.RightClick To Close the Window.</p></Center>
</body>
</html>
ENDTEXT
Set Safe Off
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)
apie.Navigate(m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
With apie
    .Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

*7*yimgfactors.prg
*http://labs.hyperandroid.com/static/CAAT-Samples/demos/demo1/path.html

local m.yrep
m.yrep=addbs(justpath(sys(16,1)))
set defa to (yrep)

set safe off
local m.myvar
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<script src='http://labs.hyperandroid.com/static/caat/lib/caat-min.js'></script>
<script src='http://labs.hyperandroid.com/static/caat/lib/template.js' ></script>

<body  topmargin=0 leftmargin=0 bgcolor="navy"  scroll="no"  oncontextmenu="window.close();return false;" >

<div>
                    <canvas id="_c8"></canvas>
                </div>
                <center><div style="color:white;"><span> mouseMove on canvas-RightClick to exit.</span>   <span id="_c8_data"></span></div></center>


<script>
                    (function() {

                        var _director_8 = new CAAT.Director().initialize(
                                <<sysmetric(1)>>,
                                <<sysmetric(2)-50>>,
                                document.getElementById('_c8')).
                                setClear(false);

                        var _scene_8 = _director_8.createScene();

                        var colors= [ 'blue', 'red', 'yellow', 'white', 'gray' ,'orange' ];
                        var color_index=0;

                        // create a container, equals in size to the director.
                        var root = new CAAT.ActorContainer().
                                create().
                                setBounds(0, 0,
                                _director_8.canvas.width, _director_8.canvas.height).
                                setFillStyle('#000000')
                        root.mouseEnter = function(mouseEvent) {
                        };
                        root.mouseExit = function(mouseEvent) {
                        };

                        _scene_8.addChild(root);

                        // on mouse move over the root Actor
                        root.mouseMove = function(mouseEvent) {

                            var r = 5 + 15 * Math.random();

                            var bubble;

                            // is pressing control, add a Rectangle-Shaped blue Actor
                            if ( Math.random()<.5 ) {
                                bubble = new CAAT.ShapeActor().
                                        setLocation(mouseEvent.point.x, mouseEvent.point.y).
                                        setSize(r, r).
                                        setShape(CAAT.ShapeActor.prototype.SHAPE_RECTANGLE).
                                        enableEvents(false).
                                        setCompositeOp('lighter').
                                        setFillStyle( colors[(color_index++)%colors.length] );

                            } else {
                                // else, add a Circle-Shaped red Actor
                                bubble = new CAAT.ShapeActor().
                                        setLocation(mouseEvent.point.x, mouseEvent.point.y).
                                        setSize(r, r).
                                        enableEvents(false).
                                        setCompositeOp('lighter').
                                        setFillStyle( colors[(color_index++)%colors.length] );
                            }

                            root.addChild(bubble);

                            // Add a container behavior, to hold a fading behavior and a moving
                            // behavior.
                            var cb = new CAAT.ContainerBehavior().
                                    setFrameTime(_scene_8.time + 2000 + 1000 * Math.random(), 500).
                                    addListener(
                                    // when the container behavior is expired, expire and discard
                                    // the actor.
                                    {
                                        behaviorExpired : function(behaviour, time, actor) {
                                            actor.
                                                    setDiscardable(true).
                                                    setExpired(true);
                                        }
                                    });

                            // fade from opacity to total transparency
                            var ab = new CAAT.AlphaBehavior().
                                    setFrameTime(0, 500).
                                    setValues(1, 0);

                            cb.addBehavior(ab);

                            // follow a vertical path of at least 100 pixels
                            var tb = new CAAT.PathBehavior().
                                    setFrameTime(0, 500).
                                    setPath(
                                    new CAAT.Path().setLinear(
                                            bubble.x, bubble.y,
                                            bubble.x, bubble.y - 100 - 100 * Math.random()));
                            cb.addBehavior(tb);

                            bubble.addBehavior(cb);
                        };

                        var span = document.getElementById('_c8_data');

                        _scene_8.onRenderEnd= function() {
                            span.innerText= 'Actors: '+root.getNumChildren();
                        };

                        CAAT.loop(20);
                    })();
                </script>
   </body>
</html>
endtext

local m.lcdest
m.lcdest=addbs(sys(2023))+"test.html"
=strtofile(m.myvar,m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer

apie=Newobject("internetexplorer.application")

with apie
  .Navigate(lcdest)
    .menubar=0
	.Toolbar=0
	.StatusBar=0
	.fullscreen=1
	.Visible=.T.
	BringWindowToTop(.HWnd)
	SetWindowText(.HWnd, "CAAT animation ")
   	.visible=.t.
Endwith

Feel free to report any bug (this desserves the communauty) or make any comment.