Javascript Code Dump By Vatsal Patel

ID : 1 & Title : Css icons to png or custom cursor draw icons on canvas

window.addEventListener('load', (event) => {
  CssIcoSvg(document.getElementById("Pensil"),"#000000","icomoon")
});
function CssIcoSvg(elemt,fnt_clr,fnt_family){
  let xx = window.getComputedStyle(elemt, ':before').getPropertyValue('content');
  xx= xx.replace(/['"]/g, '')
   let canvas = document.createElement("canvas");
    canvas.width = 24;
    canvas.height = 24;
    // document.body.appendChild(canvas);
   let ctx = canvas.getContext("2d");
    // ctx.fillStyle = "#000000";
    ctx.fillStyle = fnt_clr;
    // ctx.font = "24px "+family;
    ctx.font = "24px "+fnt_family;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(xx, 12, 12);
    var dataURL = canvas.toDataURL('image/png');
    document.body.style.cursor = 'url('+dataURL+') 0 20, auto';
    //0 20 x,y is offset for perfect hotspot( mouse click )
}

//font file load hase toj work karse

// to check it in css
// @font-face {
//     font-family: 'icomoon';
//     src:  url('../fonts/icomoon.eot');
//     src:  url('../fonts/icomoon.eot') format('embedded-opentype'),
//       url('../fonts/icomoon.ttf') format('truetype'),
//       url('../fonts/icomoon.woff') format('woff'),
//       url('../fonts/icomoon.svg#icomoon') format('svg');
//     font-weight: normal;
//     font-style: normal;
//     font-display: block;
//   }

ID : 2 & Title : get pixel colour from canvasID : 3 & Title : Flood fill , Area fill in canvas on x,y pos

// Bucket(Canvas, ctx, Flood_clr,xP,yP);// clr in hax, xp and yp must be int,..
function Bucket(e,t,o,l,r){if(!(this instanceof Bucket))return new Bucket(e,t,o,l,r);var n=this,i=e.getContext("2d");this.canvas=e,t=t||{},this.colour=o,this.tolerance=void 0===t.tolerance||isNaN(""+t.tolerance)?10:t.tolerance,this.fill_tolerance=10,console.log(e.getClientRects()),o=e.getClientRects()[0],t=i.getImageData(0,0,o.width,o.height),o=(e=new Function("x","y","return 4 * (y * "+t.width+" + x)"))(l,r),console.log(l),tolerance_equal(o=t.data.slice(o,o+4),0,n.parsed_colour,n.fill_tolerance)||(flood_fill(t.data,e,{x:l,y:r},n.parsed_colour,o,n.tolerance,t.width,t.height),i.putImageData(t,0,0))}function tolerance_equal(e,t,o,l){var r=o.length,n=t+r;for(l=l||0;n--&&r--;)if(Math.abs(e[n]-o[r])>l)return!1;return!0}function flood_fill(e,t,o,l,r,n,i,a){for(var c,s,u,f,_,d,p,h=[o],g={},y=flood_fill.steps;o=h.pop();)if(tolerance_equal(e,f=t(s=o.x,u=o.y),r,n))for(_=flood_fill.fill_ways;_--;)_<4&&(e[f+_]=l[_]),c=(d=s+y[_][0])+","+(p=u+y[_][1]),d<0||p<0||i<=d||a<=p||g[c]||(h.push({x:d,y:p}),g[c]=!0)}Object.defineProperty(Bucket.prototype,"colour",{get:function(){return this.__colour},set:function(e){var t=Bucket.__parse_colour_rgx.exec(e||"");t?(this.__colour=e,this.__parsed_colour=t.slice(1).map(function(e){return e=parseInt(e,16),isNaN(e)||e<0||255<e?255:e})):window.DEBUG&&console.warn("Invalid colour set: ",e)}}),Object.defineProperty(Bucket.prototype,"parsed_colour",{get:function(){return this.__parsed_colour}}),Bucket.__parse_colour_rgx=/^#?([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})?$/i,flood_fill.steps=[[1,0],[0,1],[0,-1],[-1,0]],Object.defineProperty(flood_fill,"fill_ways",{get:function(){return flood_fill.steps.length}});

ID : 4 & Title : Canvas events boilerplate

var mousedown =false;
var lastEvt =null;

A_C = document.querySelector("canvas") ;
 A_ctx = A_C.getContext("2d");
 A_C.addEventListener('mousemove', onmousemove, false);
 A_C.addEventListener('mousedown', onmousedown, false);
 A_C.addEventListener('mouseup', onmouseup, false); 
 A_C.addEventListener('touchstart', ontouchstart, false);
 A_C.addEventListener('touchend', ontouchend, false);
 A_C.addEventListener('touchmove', ontouchmove, false);

function onmousedown(n){
n.preventDefault();
let x = n.offsetX;
let y = n.offsetY;
mousedown =true;
console.log(x,y);
}

function ontouchstart(n){
n.preventDefault();
let x = n.targetTouches[0].pageX - A_C.getBoundingClientRect().left;
let y = n.targetTouches[0].pageY - A_C.getBoundingClientRect().top; 
mousedown =true;
lastEvt =n; 
console.log(x,y);
}

function onmouseup(n){
n.preventDefault();
mousedown =false;
let x = n.offsetX;
let y = n.offsetY; 
console.log(x,y);
}

function ontouchend(n){
n.preventDefault();
mousedown =false;
let x =lastEvt.targetTouches[0].pageX - A_C.getBoundingClientRect().left ;
let y =lastEvt.targetTouches[0].pageY - A_C.getBoundingClientRect().top ;
console.log(x,y);
}

function onmousemove(n){
n.preventDefault();
let x = n.offsetX ;
let y = n.offsetY ; 
console.log(x,y);
}

function ontouchmove(n){
n.preventDefault();
let x =  n.targetTouches[0].pageX - A_C.getBoundingClientRect().left;
let y = n.targetTouches[0].pageY - A_C.getBoundingClientRect().top;
lastEvt =n; //used in touch end
console.log(x,y);
}

ID : 5 & Title : Canvas image rotate

function rotateImage(degree){
  // var img = document.createElement("img");
img.src = A_C.toDataURL();
    img.onload = function() {
let rad = degree* Math.PI / 180; 
let w,h,x,y;
w = img.width ;
h = img.height ;
let canvasTemp = GetEl("#vatCanvas100");
// let canvasTemp = document.createElement("canvas");
let ctxTemp = canvasTemp.getContext("2d");
let Origin = TranslateXYImgRotate(degree,w,h);
canvasTemp.width = Math.abs(w * Math.cos(rad)) + Math.abs(h * Math.sin(rad));
canvasTemp.height  = Math.abs(w * Math.sin(rad)) + Math.abs(h * Math.cos(rad));
ctxTemp.save();
ctxTemp.translate(Origin[0], Origin[1]);
ctxTemp.rotate(rad);
ctxTemp.drawImage(img, 0,0);
 ctxTemp.restore();
    }
}

ID : 6 & Title : err: Tainted canvases may not be exported.ID : 7 & Title : bug :Canvas Draw image Quality lossID : 8 & Title : Flood fill points findID : 9 & Title : Chart Grid and arrow Drawer

var controlPoints = [0, 1, -10, 1, -10, 5];

//arrow
!function(t){t&&t.prototype&&(t.prototype.arrow=function(t,o,n,r,h){var n=n-t,r=r-o,e=Math.sqrt(n*n+r*r),p=r/e,s=n/e,a=[];a.push(0,0);for(var u=0;u<h.length;u+=2){var i=h[u],f=h[u+1];a.push(i<0?e+i:i,f)}a.push(e,0);for(u=h.length;0<u;u-=2){i=h[u-2],f=h[u-1];a.push(i<0?e+i:i,-f)}a.push(0,0);for(u=0;u<a.length;u+=2){i=a[u]*s-a[u+1]*p+t,f=a[u]*p+a[u+1]*s+o;0===u?this.moveTo(i,f):this.lineTo(i,f)}})}(CanvasRenderingContext2D);

ID : 10 & Title : Draw line on canvas using Points arry,..ID : 11 & Title : Draw Font on canvas using Points arry,..ID : 12 & Title : Draw Arc Between two lines with angle notation,..

// x,y center point,
// X1,Y1 First Point,
// X2,Y2 Second Point,
// D Distance Arc Radius,

function VatArcDraw(x,y,X1,Y1,X2,Y2,D,ctx){

let R1=P2R(x,y,X1,Y1);let R2=P2R(x,y,X2,Y2);

let R3=(R1+R2)/2;R2<-3?R3=(R1+Math.abs(R2))/2:3<R1&&(R3=(eval("-"+R1)+R2)/2);

let A =Math.round(RadToDeg(P3A({x:X1,y:Y1},{x:x,y:y},{x:X2,y:Y2})));

let [c1,c2] = AngleToPoints(x,y,D+20,R3);

ctx.save(),ctx.lineWidth=2,
ctx.beginPath(),ctx.moveTo(x,y),
ctx.arc(x,y, D, R1,R2 ),
ctx.fillStyle = "green",
ctx.textBaseline = "top",
ctx.font = "500 14px Verdana";
ctx.fillText(A+ "°" , c1,c2);
ctx.stroke(), ctx.restore();
}