Html5 canvas on HTA support.

Published on by Yousfi Benameur


The hta encapsules PEM of internet explorer but without security barriers.
Hta is a normal window and looks like vfp one.Its usefull to run internet explorer in local.
Normally the old HTA cannot support  the html5 canvas (as vfp) .
Use the following value to display the webpage in edge mode, which is the
highest standards mode supported by Internet Explorer, from Internet
Explorer 6 through IE11. this emulation is simply made by one line of html code

<meta http-equiv='x-ua-compatible' content='ie=edge'/>

(ref:https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx)
Tip If you want all supported versions of Internet Explorer to open your pages in standards mode, use the HTML5 document type declaration, as shown above in top of the page (meta tag).

this is also available on the vfp olebrowser (runs on ie8<) also can load this  line and work maybe without adjusting the registry (not tested)).
this code makes  on hta support, some free drawings(already presented in earlier posts of html5 canvas on a form).
In an IE normal window there is many security problems (for canvas  saving in particular to avoid hackings).
-Can set a context background and save with or without background.
- can print the canvas .A virtual printer(as pdfCreator) can convert image as pdf,png,jpg,svg,...
the security barriers  are avoided in hta window.this takes a great advantage to run on local environment.See the try/catch/endtry structure in javascript function saveImageAs().

-note : adding the hta emulation, cannot cut the titlebar (caption="no" and cannot setup a window icon(icon="some icon")

-For making the code running
  -copy the code below as prg
  -download images and put them in a separate folder images\ (in the folder source of prg) can also link to web images (but warning security problems).images are named brush*.png....
  -Download patterns  below and put them in patterns\ folder as source.The code takes 2 random patterns for working .
  -There is a summary help in the application.
  -Saving is a standard IE web method: fires a new window and right click to save as (PNG,BMP).can also print.
All is tested on Windows8.1 only  


 



Set Safe Off
Local m.yrep,m.yhelp
m.yrep=Addbs(Justpath(Sys(16,1)))
m.yhelp=yhelp()


Local gnbre,gnlower,gnupper,N
gnbre=Adir (gabase,m.yrep+"images\brush*.png")
gnlower = 1
gnupper = gnbre
N= Int((gnupper - gnlower + 1) * Rand( ) + gnlower)

Local xpict1,xpict2
m.xpict1= Strtran( m.yrep+"images\"+gabase(N,1),"\","/")   &&brush picture 1
N= Int((gnupper - gnlower + 1) * Rand( ) + gnlower)
m.xpict2= Strtran( m.yrep+"images\"+gabase(N,1),"\","/")   &&brush picture 2


Set Defa To (yrep)
Local xx,m.back
m.xx=Int(Val(Inputbox("Background 1 or2 ","","1")))
If ! Between(m.xx,1,2)
    m.xx=1
Endi

If m.xx=1
	TEXT to m.back noshow
canvas {
background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;
}
	ENDTEXT

Else

	TEXT to m.back noshow
.canvas  {
background-color: rgba(128,0,64,0.25);
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
}
	ENDTEXT
Endi



Local m.myvar
TEXT to m.myvar textmerge noshow
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>html5 canvas on hta</title>
    <HTA:APPLICATION ID="oMyApp"
	    APPLICATIONNAME="HTML5 Canvas drawings"
	    CAPTION="yes"
	    BORDER="no"
            contextmenu="no"
	    SHOWINTASKBAR="yes"
	    SINGLEINSTANCE="yes"
	    SYSMENU="yes"
	    SCROLL="no"
	    ICON="sun.ico"
	    WINDOWSTATE="normal">

<style>
<<m.back>>
</style>
</head>
<body  onload="yb();">
<center><div  id="ydiv">
<select  id="myselect" style="width:200px;" onchange='ys(document.getElementById("myselect").value);'>
"<option value="brush1">brush1</option>
 <option value="brush2">brush2</option>
 <option value="brush3">brush3</option>
 <option value="brush4">brush4 </option>
 <option value="brush5">brush5</option>
 <option value="brush6">brush6</option>
 <option value="brush7">brush7</option>
 <option value="brush8">brush8</option>
 <option value="brush9">brush9</option>
 <option value="brush10">brush10</option>
 <option value="brush11">brush11</option>
 </select>
 <input type="Text" value="" id="ylab" style="width:350;color:red;background-color:cyan;" readonly>
 <input type="button" id "ybutton"  value="clear" style="cursor:pointer;color:red;background-color:lime;" onclick="yclear()";>
 <input type="button" id="ybutton" value="Save canvas as image" style="cursor:pointer;background-color:lime;color:red;" onclick="saveImageAs();">
 <input type="button" id="yprint" value="PRINT" style="cursor:pointer;background-color:lime;color:red;" onclick="document.getElementById('ydiv').style.display='none';javascript:window.print();document.getElementById('ydiv').style.display=''">
  <input type="file" id="xpattern" accept="image/x-png, image/gif, image/jpeg" value=""  onchange='yclear();' />
  <input type="button" id="yhelp" value="Help" style="cursor:pointer;background-color:lime;color:red;" onclick="yhelp();">
 <input type="button" id="yexit" value="Exit" style="cursor:pointer;background-color:lime;color:tomato;" onclick="window.close();">

 </div></center>
<canvas id="ycanvas1" class="canvas" width="<<sysmetric(1)-20>>" height="<<sysmetric(2)-70>>" ></canvas>


<script>
/////////////////////////////////////////
function yb() {
var el=document.getElementById("ycanvas1");
var ctx=el.getContext("2d");
var img = document.createElement('IMG');   //new Image();
img.onload = function() {
 var pat=ctx.createPattern(img,"repeat");
 ctx.rect(0, 0, el.width,el.height);
    ctx.fillStyle = pat;
    ctx.fill();
}
img.src =document.getElementById("xpattern").value;
}
////////////////////////////////////////////

function ypencil4() {

// based on http://www.tricedesigns.com/2012/01/04/sketching-with-html5-canvas-and-brush-images/
var img = new Image();
img.src = 'http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png';  //'<<m.xpict1>>';   //
img.width = 10;

function distanceBetween(point1, point2) {
  return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
  return Math.atan2( point2.x - point1.x, point2.y - point1.y );
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillStyle="000000";
ctx.clearRect(0,0,el.width,el.height);

ctx.lineJoin = ctx.lineCap = 'round';

var isDrawing, lastPoint;
el.onmousedown = function(e) {
  isDrawing = true;
  lastPoint = { x: e.clientX, y: e.clientY };
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  var currentPoint = { x: e.clientX, y: e.clientY };
  var dist = distanceBetween(lastPoint, currentPoint);
  var angle = angleBetween(lastPoint, currentPoint);

  for (var i = 0; i < dist; i++) {
    x = lastPoint.x + (Math.sin(angle) * i);
    y = lastPoint.y + (Math.cos(angle) * i);
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(0.5, 0.5);
    ctx.rotate(Math.PI * 180 / getRandomInt(0, 180));
    ctx.drawImage(img, 0, 0);
    ctx.restore();
  }

  lastPoint = currentPoint;
};

el.onmouseup = function() {
  isDrawing = false;
};

}
////////////////////////////////////////////////////////
function ypencil5(){
var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillstyle="000000";
ctx.clearRect(0,0,el.width,el.height);

ctx.lineWidth = 3;
ctx.lineJoin = ctx.lineCap = 'round';

var isDrawing, lastPoint;

el.onmousedown = function(e) {
  isDrawing = true;
  lastPoint = { x: e.clientX, y: e.clientY };
};

el.onmousemove = function(e) {
  if (!isDrawing) return;
  ctx.beginPath();
  ctx.strokeStyle='#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
  ctx.globalAlpha = 1;
  ctx.moveTo(lastPoint.x - 4, lastPoint.y - 4);
  ctx.lineTo(e.clientX - 4, e.clientY - 4);
  ctx.stroke();

  ctx.globalAlpha = 0.6;
  ctx.moveTo(lastPoint.x - 2, lastPoint.y - 2);
  ctx.lineTo(e.clientX - 2, e.clientY - 2);
  ctx.stroke();

  ctx.globalAlpha = 0.4;
  ctx.moveTo(lastPoint.x, lastPoint.y);
  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();

  ctx.globalAlpha = 0.3;
  ctx.moveTo(lastPoint.x + 2, lastPoint.y + 2);
  ctx.lineTo(e.clientX + 2, e.clientY + 2);
  ctx.stroke();

  ctx.globalAlpha = 0.2;
  ctx.moveTo(lastPoint.x + 4, lastPoint.y + 4);
  ctx.lineTo(e.clientX + 4, e.clientY + 4);
  ctx.stroke();

  lastPoint = { x: e.clientX, y: e.clientY };
};

el.onmouseup = function() {
  isDrawing = false;
};

}
///////////////////////////////////////////////////
function ypencil6(){

function distanceBetween(point1, point2) {
  return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
  return Math.atan2( point2.x - point1.x, point2.y - point1.y );
}

var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillstyle="000000";
ctx.clearRect(0,0,el.width,el.height);


ctx.fillStyle = 'bisque';
ctx.strokeStyle = 'green';

var isDrawing, lastPoint;

el.onmousedown = function(e) {
  isDrawing = true;
  lastPoint = { x: e.clientX, y: e.clientY };
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  var currentPoint = { x: e.clientX, y: e.clientY };
  var dist = distanceBetween(lastPoint, currentPoint);
  var angle = angleBetween(lastPoint, currentPoint);

  for (var i = 0; i < dist; i+=5) {
    x = lastPoint.x + (Math.sin(angle) * i) - 25;
    y = lastPoint.y + (Math.cos(angle) * i) - 25;
    ctx.beginPath();
    ctx.arc(x+10, y+10, 20, false, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }

  lastPoint = currentPoint;
};

el.onmouseup = function() {
  isDrawing = false;
};
}
///////////////////////////////////////
function ypencil7(){
// http://carisenda.com/blog/2012/howto-draw-a-star-with-canvas.html
function drawStar(options) {
  var length = 15;
  ctx.save();
  ctx.translate(options.x, options.y);
  ctx.beginPath();
  ctx.globalAlpha = options.opacity;
  ctx.rotate(Math.PI / 180 * options.angle);
  ctx.scale(options.scale, options.scale);
  ctx.strokeStyle = options.color;
  ctx.lineWidth = options.width;
  for (var i = 5; i--;) {
    ctx.lineTo(0, length);
    ctx.translate(0, length);
    ctx.rotate((Math.PI * 2 / 10));
    ctx.lineTo(0, -length);
    ctx.translate(0, -length);
    ctx.rotate(-(Math.PI * 6 / 10));
  }
  ctx.lineTo(0, length);
  ctx.closePath();
  ctx.stroke();
  ctx.restore();
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillstyle="000000";
ctx.clearRect(0,0,el.width,el.height);

var isDrawing, points = [ ], radius = 15;

function addRandomPoint(e) {
  points.push({
    x: e.clientX,
    y: e.clientY,
    angle: getRandomInt(0, 180),
    width: getRandomInt(1,10),
    opacity: Math.random(),
    scale: getRandomInt(1, 20) / 10,
    color: ('rgb('+getRandomInt(0,255)+','+getRandomInt(0,255)+','+getRandomInt(0,255)+')')
  });
}

el.onmousedown = function(e) {
  isDrawing = true;
  addRandomPoint(e);
};
el.onmousemove = function(e) {
  if (!isDrawing) return;

  addRandomPoint(e);

  for (var i = 0; i < points.length; i++) {
    drawStar(points[i]);
  }
};
el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};
}

////////////////////////////////////////
function ypencil8(){
function drawPixels(x, y) {
  for (var i = -10; i < 10; i+= 4) {
    for (var j = -10; j < 10; j+= 4) {
      if (Math.random() > 0.5) {
        ctx.fillStyle = ['red', 'orange', 'yellow', 'green',
                         'light-blue', 'blue', 'purple'][getRandomInt(0,6)];
        ctx.fillRect(x+i, y+j, 4, 4);
      }
    }
  }
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillstyle="000000";
ctx.clearRect(0,0,el.width,el.height);


ctx.lineJoin = ctx.lineCap = 'round';
var isDrawing, lastPoint;

el.onmousedown = function(e) {
  isDrawing = true;
  lastPoint = { x: e.clientX, y: e.clientY };
};
el.onmousemove = function(e) {
  if (!isDrawing) return;

  drawPixels(e.clientX, e.clientY);

  lastPoint = { x: e.clientX, y: e.clientY };
};
el.onmouseup = function() {
  isDrawing = false;
};
}
/////////////////////////////////////////////////////////////////////
function ypencil9(){

function midPointBtw(p1, p2) {
  return {
    x: p1.x + (p2.x - p1.x) / 2,
    y: p1.y + (p2.y - p1.y) / 2
  };
}
function getPattern() {
  var patternCanvas = document.createElement('canvas'),
      dotWidth = 20,
      dotDistance = 5,
      ctx = patternCanvas.getContext('2d');

  patternCanvas.width = 35; patternCanvas.height = 20;
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 5, 20);
  ctx.fillStyle = 'orange';
  ctx.fillRect(5, 0, 10, 20);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(10, 0, 15, 20);
  ctx.fillStyle = 'green';
  ctx.fillRect(15, 0, 20, 20);
  ctx.fillStyle = 'lightblue';
  ctx.fillRect(20, 0, 25, 20);
  ctx.fillStyle = 'blue';
  ctx.fillRect(25, 0, 30, 20);
  ctx.fillStyle = 'purple';
  ctx.fillRect(30, 0, 35, 20);
  return ctx.createPattern(patternCanvas, 'repeat');
}

var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillstyle="000000";
ctx.clearRect(0,0,el.width,el.height);


ctx.lineWidth = 25;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.strokeStyle = getPattern();

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

 points.push({ x: e.clientX, y: e.clientY });

  var p1 = points[0];
  var p2 = points[1];

  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);

  for (var i = 1, len = points.length; i < len; i++) {
    var midPoint = midPointBtw(p1, p2);
    ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
    p1 = points[i];
    p2 = points[i+1];
  }
  ctx.lineTo(p1.x, p1.y);
  ctx.stroke();
};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};
}
/////////////////////////////////////////////////
function ypencil10(){
function midPointBtw(p1, p2) {
  return {
    x: p1.x + (p2.x - p1.x) / 2,
    y: p1.y + (p2.y - p1.y) / 2
  };
}
function getPattern() {
  var patternCanvas = document.createElement('canvas'),
      dotWidth = 20,
      dotDistance = 5,
      ctx = patternCanvas.getContext('2d');


  patternCanvas.width = 10; patternCanvas.height = 20;
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, 5, 20);
  ctx.fillStyle = 'gold';
  ctx.fillRect(5, 0, 10, 20);
  return ctx.createPattern(patternCanvas, 'repeat');
}

var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillstyle="000000";
ctx.clearRect(0,0,el.width,el.height);


ctx.lineWidth = 25;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.strokeStyle = getPattern();

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;
  points.push({ x: e.clientX, y: e.clientY });

  var p1 = points[0];
  var p2 = points[1];

  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);

  for (var i = 1, len = points.length; i < len; i++) {
    var midPoint = midPointBtw(p1, p2);
    ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
    p1 = points[i];
    p2 = points[i+1];
  }
  ctx.lineTo(p1.x, p1.y);
  ctx.stroke();
};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};
}
////////////////////////////////////////////////////////
function ypencil11(){
function midPointBtw(p1, p2) {
  return {
    x: p1.x + (p2.x - p1.x) / 2,
    y: p1.y + (p2.y - p1.y) / 2
  };
}

function getPattern() {
  return ctx.createPattern(img, 'repeat');
}

var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillstyle="000000";
ctx.clearRect(0,0,el.width,el.height);


ctx.lineWidth = 25;
ctx.lineJoin = ctx.lineCap = 'round';

var img = new Image;
img.onload = function() {
  ctx.strokeStyle = getPattern();
};
img.src ='<<m.xpict2>>';
//alert(img.src);
var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  points.push({ x: e.clientX, y: e.clientY });

  var p1 = points[0];
  var p2 = points[1];

  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);

  for (var i = 1, len = points.length; i < len; i++) {
    var midPoint = midPointBtw(p1, p2);
    ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
    p1 = points[i];
    p2 = points[i+1];
  }
  ctx.lineTo(p1.x, p1.y);
  ctx.stroke();
};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};
}
////////////////////////////////////////
function ypencil2(){

var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillStyle="000000";
ctx.clearRect(0,0,el.width,el.height);

var isDrawing;

el.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
  if (isDrawing) {
    var radgrad = ctx.createRadialGradient(
      e.clientX,e.clientY,10,e.clientX,e.clientY,20);

    radgrad.addColorStop(0, '#000');
    radgrad.addColorStop(0.5, 'rgba(0,0,0,0.5)');
    radgrad.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = radgrad;

    ctx.fillRect(e.clientX-20, e.clientY-20, 40, 40);
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

}
////////////////////////////////////////////////////////////////
  function ypencil1() {
var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillStyle="000000";
ctx.clearRect(0,0,el.width,el.height);

ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.shadowBlur = 10;
ctx.shadowColor = 'rgb(0, 0, 0)';

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  points.push({ x: e.clientX, y: e.clientY });

  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (var i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.stroke();
};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};
}
/////////////////////////////////////////
function ypencil3 (){
var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillStyle="000000";
ctx.clearRect(0,0,el.width,el.height);


var isDrawing;

el.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
  if (isDrawing) {
    var radgrad = ctx.createRadialGradient(
      e.clientX,e.clientY,10,e.clientX,e.clientY,20);

    radgrad.addColorStop(0, '#000');
    radgrad.addColorStop(0.5, 'rgba(0,0,0,0.5)');
    radgrad.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = radgrad;

    ctx.fillRect(e.clientX-20, e.clientY-20, 40, 40);
  }
};
el.onmouseup = function() {
  isDrawing = false;
};
}
/////////////////////////
function yclear(){
var el = document.getElementById('ycanvas1');
var ctx = el.getContext('2d');
//clear canvas
ctx.fillStyle="000000";
ctx.clearRect(0,0,el.width,el.height);
yb();  //set the current pattern
}

/////////////////////////////////////////////
function saveImageAs() {
var el=document.getElementById("ycanvas1");

try {

 var d=el.toDataURL("image/png");
 alert("image encoded here :      "+d);
 var w=window.open("about:blank","From canvas","menubar=0,toolbar=0,statusbar=0,resizable=1");
w.document.write("<center><h2  style='background-color:yellow;color:red; width:600;'>Right click to fire menu and choose save as PNG...</h2></center><br>"+"<img src='"+d+"' alt='from canvas'/>");
}
catch(e){
    alert("cannot save! " +"Error Message: " + e.message+ " Error Name: " + e.name);  //security pbs if browser even for apIE
}

 }
 //////////////////////////////////////////
 function yprint(){
  var OLECMDID = 7; // 7 == Print Preview
  var PROMPT = 1; // 2 == DONTPROMPTUSER

 document.parent.ExecWB(OLECMDID, PROMPT);
 }
 ///////////////////////////////////////////////////

 function ys(va){
 document.getElementById('ylab').value="";
 if (va=="brush1"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !"; yclear; ypencil11() ; }
 if (va=="brush2"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !"; yclear; ypencil10() ; }
 if (va=="brush3"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !";  yclear; ypencil9() ; }
 if (va=="brush4"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !"; yclear;  ypencil8() ; }
 if (va=="brush5"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !";  yclear; ypencil7() ; }
 if (va=="brush6"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !"; yclear;  ypencil6() ; }
 if (va=="brush7"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !";  yclear;  ypencil5(); }
 if (va=="brush8"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !"; yclear;  ypencil4() ; }
 if (va=="brush9"){document.getElementById('ylab').value= va+ "   Draw on canvas with mouse !";  yclear; ypencil3() ; }
 if (va=="brush10"){document.getElementById('ylab').value= va+"   Draw on canvas with mouse !";  yclear; ypencil2() ; }
 if (va=="brush11"){document.getElementById('ylab').value= va+"   Draw on canvas with mouse !";  yclear; ypencil1() ; }
 }

 //////////////////////////////////////
 function yhelp(){
alert(<<m.yhelp>>);
}
/////////////////////////////////////

 </script>
ENDTEXT


lcdest=Addbs(Sys(2023))+"ytest.hta"
Strtofile(m.myvar, m.lcdest)
Copy File( Home(1)+"graphics\icons\elements\sun.ico") To Sys(2023)
*Modi Comm (lcdest)

***************
&&shellexecute - show hta in maximized window
Declare Integer ShellExecute In SHELL32.Dll Integer nWinHandle,;
	STRING cOperation,;
	STRING cFileName,;
	STRING cParameters,;
	STRING cDirectory,;
	INTEGER nShowWindow
result = ShellExecute(0, "open", m.lcdest,"","",3)

Retu


Function yhelp()
	TEXT to m.yhelp noshow
The hta encapsule PEM of internet explorer but without security problems.
Hta is a normal window and looks like vfp one.
Normally the old HTA cannot run the html5 canvas (as vfp9) .
Use the following value to display the webpage in edge mode, which is the
 highest standards mode supported by Internet Explorer, from Internet
  Explorer 6 through IE11. this emulation is simply made by one line of html code
<meta http-equiv='x-ua-compatible' content='ie=edge'/>
this is also available the vfp olebrowser (runs on ie8<) also can load this
 line and works maybe without adjusting the registry (not tested)).
this code make some free drawings(already presented in earlier posts
of html5 canvas) on hta support.
In an IE noral window there is many security problems (for canvas
 saving in particular).Can set a context background and save with or without background.
 can print the canvas .A virtual printer (as pdfCreator)can  convert image as pdf,png,svg...
these are avoided in hta window.this takes advantage to run on local environment.
ref:https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx
	ENDTEXT

	x="'*'"
	For i=1 To Memlines(m.yhelp)
		If !i=Memlines(m.yhelp)
			x=x+ '+" '+Mline(m.yhelp,i)+'" +" \n" ' +Chr(13)
		Else
			x=x+'+" +'+Mline(m.yhelp,i)+'" +" \n" ' +Chr(13)
		Endi
	Endfor
	Return m.x
Endfunc



 

choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..
choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..

choose a brush and Mousedown on canvas to draw.can add abother brushes(see preview posts)..

Images to download and put in a folder "images\" in source folder as prg.
Images to download and put in a folder "images\" in source folder as prg.
Images to download and put in a folder "images\" in source folder as prg.
Images to download and put in a folder "images\" in source folder as prg.
Images to download and put in a folder "images\" in source folder as prg.
Images to download and put in a folder "images\" in source folder as prg.

Images to download and put in a folder "images\" in source folder as prg.

 
Remarks:
1-An hta file is a simple htm or html file but with a special header named application tag (as used here):
<HTA:APPLICATION ID="oMyApp"
        APPLICATIONNAME="HTML5 Canvas drawings"
	    CAPTION="yes"
	    BORDER="no"
            contextmenu="no"
	    SHOWINTASKBAR="yes"
	    SINGLEINSTANCE="yes"
	    SYSMENU="yes"
	    SCROLL="no"
	    ICON="sun.ico"
	    WINDOWSTATE="normal">
See  all   available parameters  in https://msdn.microsoft.com/en-us/library/ms536495.aspx
there is some code examples.

2-to make this hta file working with higher IE emulation add in meta tag this line:
<meta http-equiv="x-ua-compatible" content="ie=edge" />
you can disable the contextmenu (right click), disable the taskbar icon (showinTasbbar property),cut the window titlebar(property caption)....

3-the hta file have an associated application to run: Shellexecute Api does that with mshta.exe  (staying in public system folder c:\windows\system32)  

4-The hta file runs with the windows system and dont need to any additional runtime and  you can generate easily an executable from any hta file with htaEdit application (google to find it).
    

 

Download these images as patterns background.put them into a folder "patterns\" in source.Can add others...
Download these images as patterns background.put them into a folder "patterns\" in source.Can add others...
Download these images as patterns background.put them into a folder "patterns\" in source.Can add others...
Download these images as patterns background.put them into a folder "patterns\" in source.Can add others...
Download these images as patterns background.put them into a folder "patterns\" in source.Can add others...
Download these images as patterns background.put them into a folder "patterns\" in source.Can add others...

Download these images as patterns background.put them into a folder "patterns\" in source.Can add others...

To be informed of the latest articles, subscribe:
Comment on this post
J
Everything is fine, am happy about your blog. Thanks admin for sharing the unique content, you have done a great job I appreciate your effort and I hope you will get more positive comments from the web users.
Reply