30:T59b,# `pixel-mark d3-Toolkit` For information on what are **pixel-marks** check [this observable](https://observablehq.com/@liris/pixel-mark) ! This toolkit is composed of 3 main functions tailored to ease the manipulation of images inside svg. Those functions : * *.shape(type,option,callback)*
Where *type* is a string amongst: `[${Object.keys(shapes).join(", ")}]` with **rect** as default. * *.fit(type,option,callback)*
Where *type* is a string amongst: `[${Object.keys(fits).join(", ")}]` with **stretch** as default. * *.transform(type,value,options = {})*
Where *type* is a string amongst: `[${Object.keys(transforms).join(", ")}]`.
And *value* is a callback that returns a number (e.g. the amount of pixels when `type=="pixel"`). The *transform()* function is chainable! *(*shape()* and *fit()* should also be but such use seems irrelevant)*. **How to use:** * First import and use the init ```javascript import {initPixScale} from "@liris/pixel-mark-d3-toolkit" iniPixScale(data,images) ``` * In SVG use .fit() to draw images, and .transform() to encode data. What follows is the minimal necessity for the use of this toolkit on a single datapoint. ```javascript const svg = d3.select(DOM.svg(50,50)) svg .append("image") .datum(data[0]) .attr("width", 50) .attr("height", 50) .attr("x", 0) .attr("y", 0) .fit() .transform("grid", (d) => Math.random()) ``` 31:T542,async function initPixScale(data,images,callback) { //DATA is an array of obj,images can be : [string(b64)], [htmlImage], d3.selection.prototype.transform = transform d3.selection.prototype.fit = fit d3.selection.prototype.shape = shape if (data !== undefined) { if(Array.isArray(images)) { for (let i = 0; i < data.length; ++i) { //todo adapt if images is an URL or an HTML element if (typeof images[0] ==="string") { data[i]["__src"] = images[i] data[i]["__img"] = await loadImage(data[i]["__src"]).then(d=>d.target); } else { data[i]["__img"] = images[i]; } data[i]["__canvas"] = DOM.canvas(data[i]["__img"].naturalWidth, data[i]["__img"].naturalHeight); data[i]["__canvas"].getContext("2d").drawImage(data[i]["__img"], 0, 0); data[i]["__canvas"].crossOrigin = "anonymous"; } }else { for (let i = 0; i < data.length; ++i) { data[i]["__src"] = images([data[i]].map(callback)[0]) data[i]["__img"] = await loadImage(data[i]["__src"]).then(d=>d.target); data[i]["__canvas"] = DOM.canvas(data[i]["__img"].naturalWidth, data[i]["__img"].naturalHeight); data[i]["__canvas"].getContext("2d").drawImage(data[i]["__img"], 0, 0); data[i]["__canvas"].crossOrigin = "anonymous"; } } } return data; }32:T510,function fit_clip(containerSize,d) { let resW = containerSize[0] let resH = containerSize[1] const imRatio = d.__img.naturalWidth / d.__img.naturalHeight const contRatio = containerSize[0] / containerSize[1] const context = d.__canvas.getContext("2d") const im = d.__img if(d.__clipath) context.clip(d.__clipath); if (contRatio < 1) { //if container is shaped like this || if (containerSize[0] < d.__img.naturalWidth) { context.drawImage( im, 0, 0, im.naturalWidth, im.naturalHeight, - (im.naturalWidth-containerSize[0])/2, 0, im.naturalWidth, containerSize[1] ); } else { //TODO: fallback } } else { //if container is shaped like this | | if (containerSize[1] < d.__img.naturalHeight) { context.drawImage( im, 0, //Center this thing 0, im.naturalWidth, im.naturalHeight, 0, - (im.naturalHeight-containerSize[1])/2, containerSize[0], im.naturalHeight ); } else { //TODO: fallback } } // d.__canvas.getContext("2d").drawImage(d.__img,0,0,resW,resH) } 33:T409,transforms = { return { "pixel": {defaultRange:[], function: pixelate}, "kcolor": {defaultRange:[1,10], function: setKcolor}, "blur": {defaultRange:[2,0], function: blur}, "opacity": {defaultRange:[0,1], function: opacity}, "sepia": {defaultRange:[1,0], function: sepia}, "invert": {defaultRange:[1,0.1], function: invert}, "saturate": {defaultRange:[0,3], function: saturate}, "brightness": {defaultRange:[0.1,2], function: brightness}, "contrast": {defaultRange:[0.15,3], function: contrast}, "grayscale": {defaultRange:[1,0], function: grayscale}, "dotted": {defaultRange:[0.025,0.25], function: dotted}, "grid": {defaultRange:[0.025,0.25], function: grid}, "countSq": {defaultRange:[0,1], function: countSq}, "toColor": {defaultRange:[], function: transform_toColor}, }}34:T423,transform = function(type,callback,dataCallback=undefined,custom=undefined) { let v = this.data().map((d)=>callback) if (typeof callback === 'function') { v = this.data().map(callback) } const elems = d3.selectAll(this) if (type =="custom") { elems.each( function(d,i) { if(dataCallback!==undefined){ let t = [d].map(callback)[0] d=t //Some shady stuff is happening without this unnecessary operation. } d.__canvas = custom(d.__canvas,v[i]) }) } else if (transforms[type]) { elems.each( function(d,i) { if(dataCallback!==undefined){ let t = [d].map(callback)[0] d=t //Some shady stuff is happening without this unnecessary operation. } d.__canvas = transforms[type].function(d.__canvas,v[i],) }) } d3.selectAll(this).attr("href", (d)=> { if(dataCallback!==undefined){ let t = [d].map(callback)[0] d=t //Some shady stuff is happening without this unnecessary operation. } return d.__canvas.toDataURL("img/png")}) return this }35:T412,function countSq(canvas,n) { let context = canvas.getContext("2d") const percent = canvas.width*0.06 const sqSize =percent const spacer=0; const total = (Math.floor(canvas.width/percent)* Math.floor(canvas.height/percent)*n) console.log(total,n) let tcan = DOM.canvas(canvas.width,canvas.height) const tcon = tcan.getContext("2d") tcon.save() tcon.globalAlpha = 1 tcon.fillRect(0,0,canvas.width,canvas.height) tcon.restore() // tcon.clearRect(0,0,canvas.width,canvas.height) tcon.globalCompositeOperation='destination-out'; let it = 0 for(let y=spacer;ytotal) break ++it } if(it>total) break } tcon.fill(); // tcon.globalCompositeOperation='destination-atop'; tcon.drawImage(canvas,0,0); // tcon.globalCompositing='source-over'; context.drawImage(tcan,0,0,canvas.width,canvas.height) return canvas }36:[] 2e:{"title":"pixel-mark d3-Toolkit","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"## TODOS:\n\n* Update intro + how to use it\n\n* ~~Add a function to merge images with datasets~~\n\n * ~~Adapt to d3.selectAll().data().enter()~~\n\n * ~~change transform calls to an object with functions~~\n\n * ~~Only rely on inner canvas~~\n\n* Implem fit strategies\n\n* More transforms\n * ~~Kcolors~~\n * ~~Filters *[blur,opacity,sepia,invert,saturate,brightness,contrast,grayscale]*~~\n * ~~Custom~~\n * toColor\n * ~~dotted/grid~~\n * count\n * ~~Square~~\n * jitter\n * Erode?\n * mosaic\n * raster\n \n* Expand .fit to shapes beside rects.\n\n* Get rid of .fit if nothing need to be done","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"## DATA STUFF","pinned":false,"hidden":false,"mode":"md"},{"id":331,"value":"async function loadImage(url) {\n let tim = new Image();\n tim.src = url;\n tim.crossOrigin = \"anonymous\"\n return await new Promise((r) => {\n tim.onload = r;\n tim.src = url;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"async function singleBind(data,img) {\n if (typeof img ===\"string\") {\n data[\"__src\"] = img\n data[\"__img\"] = await loadImage(data[\"__src\"]).then(d=>d.target);\n } else {\n data[\"__img\"] = img;\n \n }\n data[\"__canvas\"] = DOM.canvas(data[\"__img\"].naturalWidth, data[\"__img\"].naturalHeight);\n data[\"__canvas\"].getContext(\"2d\").drawImage(data[\"__img\"], 0, 0);\n data[\"__canvas\"].crossOrigin = \"anonymous\";\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"# `Shape`","pinned":false,"hidden":false,"mode":"md"},{"id":845,"value":"shape = function(type=\"rect\", option=undefined,callback=undefined) {\n\n const elems = d3.selectAll(this)\n\n elems.attr(\"href\", function(d) {\n if (callback!== undefined) { //TODO: modify this to adress d3-hierachies\n let t = [d].map(callback)[0]\n d=t //Some shady stuff is happening without this unnecessary operation, and I'm too lazy to tackle Observable's reference system.\n }\n let elem = d3.select(this)\n let width = elem.attr(\"width\")\n let height = elem.attr(\"height\")\n\n let [w, h] = autoRatio(d.__img,width, height) \n\n elem.attr(\"width\",w)\n elem.attr(\"height\",h)\n \n d.__canvas.width = w\n d.__canvas.height = h\n \n shapes[type].function([w,h],d,option)\n \n return d.__canvas.toDataURL(\"img/png\")\n }) \n return this\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":718,"value":"function shape_rect(containerSize,d) {\n\n\n const cont = d.__canvas.getContext(\"2d\")\n cont.clearRect(0,0,...containerSize)\n d.__clipath =undefined\n\n\n cont.drawImage(d.__img,0,0,containerSize[0],containerSize[1])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"function shape_circle(containerSize,d,r){\n\nif (r === undefined) {\n\n r= Math.min(...containerSize)/2\n}\n\nconst cont = d.__canvas.getContext(\"2d\")\n\n let circlePath = new Path2D();\n circlePath.arc(containerSize[0]/2,containerSize[1]/2,r,0,2 * Math.PI)\n cont.clip(circlePath);\n\n d.__clipath =circlePath\n \n cont.drawImage(d.__img,0,0,containerSize[0],containerSize[1])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":722,"value":"function shape_path(containerSize,d,path) {\n let clipPath\n const cont = d.__canvas.getContext(\"2d\")\n if (Array.isArray(path)) {\n if (path.length > 3) {\n if(Math.max(...path.map(d=>d[0])) <=1 && Math.max(...path.map(d=>d[1])) <=1) { //IF path is in relative coordinates\n path = path.map(d=> d.map((v,i)=>v*containerSize[i]))\n }\n clipPath = new Path2D();\n clipPath.moveTo(...path[0])\n \n for (let i = 1; i < path.length; ++i) {\n clipPath.lineTo(...path[i])\n }\n }\n } else if (typeof path ==\"string\") {\n clipPath = new Path2D(path);\n } else {\n clipPath = new Path2D();\n }\n \n cont.clip(clipPath);\n d.__clipath =clipPath\n cont.drawImage(d.__img,0,0,containerSize[0],containerSize[1])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"shapes = {\n return {\"rect\":{function:shape_rect},\"circle\":{function:shape_circle},\"path\":{function:shape_path},\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"# `Fit`","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"fits = {\n return {\"clip\":{function:fit_clip},\"stretch\":{function:fit_stretch},\"carve\":{function:fit_carve},\"repeat\":{function:fit_repeat}\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"fit = function(type=\"stretch\", callback=undefined) {\n \n const elems = d3.selectAll(this)\n\n elems.attr(\"href\", function(d) {\n if (callback!== undefined) { //TODO: modify this to adress hierachies\n let t = [d].map(callback)[0]\n d=t //Some shady stuff is happening without this unnecessary operation, and I'm too lazy to tackle Observable's reference system.\n }\n // console.log(d)\n\n let elem = d3.select(this)\n const width = elem.attr(\"width\")\n const height = elem.attr(\"height\")\n d.__canvas.width = width\n d.__canvas.height = height\n\n let [w, h] = autoRatio(d.__img,width, height) \n\n\n elem.attr(\"width\",w)\n elem.attr(\"height\",h)\n \n d.__canvas.width = w\n d.__canvas.height = h\n fits[type].function([w,h],d)\n \n return d.__canvas.toDataURL(\"img/png\")\n \n }) \n\n return this\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"function fit_repeat(containerSize,d) {\n\n const cont = d.__canvas.getContext(\"2d\")\n if(d.__clipath) \n cont.clip(d.__clipath);\n \n \n cont.drawImage(d.__img,0,0,containerSize[0],containerSize[1])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"function fit_stretch(containerSize,d) {\n \n const cont = d.__canvas.getContext(\"2d\")\n if(d.__clipath) \n cont.clip(d.__clipath);\n \n cont.drawImage(d.__img,0,0,containerSize[0],containerSize[1])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"function fit_carve(containerSize,d) {\n let tcan \n const contRatio = containerSize[0] / containerSize[1]\n const imgRatio = d.__img.naturalWidth /d.__img.naturalHeight\n \n if ( contRatio == imgRatio) { //With same aspect ratio, we avoid computation\n d.__canvas.getContext(\"2d\").drawImage(d.__img,0,0,containerSize[0],containerSize[1])\n } else {\n \n \n if ( d.__img.naturalWidth > containerSize[0]) {\n tcan = carved(d.__img,containerSize[0])\n\n } else if( d.__img.naturalHeight > containerSize[1]) { // horizontal carvings\n\n tcan =verticalCarve(d.__img,containerSize[1])\n \n } else {\n tcan = DOM.canvas(containerSize[0],containerSize[1])\n tcan.getContext(\"2d\").drawImage(d.__img,0,0,containerSize[0],containerSize[1])\n }\n const cont = d.__canvas.getContext(\"2d\")\n if(d.__clipath) \n cont.clip(d.__clipath);\n \n cont.drawImage(tcan,0,0,containerSize[0],containerSize[1])\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"# Transforms","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"## Actual transform functions for Pix-scale","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"## Count\n","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"### Patterns","pinned":false,"hidden":false,"mode":"md"},{"id":385,"value":"function dotted(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n\n const percent = (canvas.width/3)*n\n // const percent = 5\n const sqSize =percent*2\n const spacer=0.5;\n\n let tcan = DOM.canvas(canvas.width,canvas.height)\n const tcon = tcan.getContext(\"2d\")\n tcon.globalAlpha = 0.8\n tcon.fillStyle =\"black\"\n tcon.fillRect(0,0,canvas.width,canvas.height)\n tcon.globalCompositeOperation='destination-out';\ntcon.globalAlpha = 1\n tcon.beginPath();\n for(let y=spacer;y {\n const result = [p.rgba.r, p.rgba.g, p.rgba.b];\n result.point = p;\n return result;\n });\n\n const dots = sampleMatrix(points, 1000);\n const centroids = kmeans(dots, n).centroids;\n\n let temp = posterized(centroids, imgData);\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"function sampleMatrix(matrix, sampleSize) {\n const result = [];\n const step = Math.floor(matrix.length / sampleSize);\n for (let i = 0; i < matrix.length; i += step) {\n result.push(matrix[Math.max(0, i - Math.floor(Math.random() * step))]);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"zip = (a, b) => a.map((j, i) => [j, b[i]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"distance = (a, b) =>\n zip(a, b)\n .map((j) => Math.pow(j[1] - j[0], 2))\n .reduce((a, b) => a + b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"centroid = (points) =>\n points.length === 0\n ? []\n : points\n .reduce((a, b) => b.map((p, i) => a[i] + p)) // summs up each dimention\n .map((p) => Math.floor(p / points.length)) // divides each dimention sum by the vector length","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"random = (points, k) => {\n if (k < 0 || k > points.length) return;\n const set = new Set();\n do {\n set.add(Math.floor(Math.random() * points.length));\n } while (set.size < k);\n return Array.from(set).map((i) => points[i]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"assign = (centroids, points) => {\n centroids.forEach((c) => {\n c.points = [];\n c.variance = 0;\n });\n\n points.forEach((p, i) => {\n let min = {};\n centroids.forEach((c, j) => {\n if (j === 0) {\n min.centroid = c;\n min.distance = distance(c, p);\n }\n const newDistance = distance(c, p);\n if (min.distance > newDistance) {\n min.centroid = c;\n min.distance = newDistance;\n }\n });\n\n min.centroid.variance += min.distance;\n min.centroid.points.push(p);\n });\n\n centroids.forEach((c) => (c.variance /= c.points.length));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"kmeans = (points, k, centroids, maxIterations = 25, tolerance = 3) => {\n if (!centroids) centroids = random(points, k);\n\n assign(centroids, points);\n\n let moved = true;\n let iterations = 0;\n\n while (moved && iterations < maxIterations) {\n iterations++;\n moved = false;\n\n for (let i = 0; i < centroids.length; i++) {\n const newCentroid = centroid(centroids[i].points);\n if (distance(centroids[i], newCentroid) > Math.pow(tolerance, 2)) {\n moved = true;\n centroids[i] = newCentroid;\n }\n }\n\n if (moved) assign(centroids, points);\n }\n\n return {\n centroids: centroids,\n iterations: iterations\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"function getMatrix(imgData) {\n const result = [];\n let x = 0;\n let y = 0;\n let maxLab = 0;\n let minLab = 0;\n\n result.height = imgData.height;\n result.width = imgData.width;\n\n for (let i = 0; i < imgData.data.length; i += 4) {\n const pixel = {\n rgba: {\n r: imgData.data[i],\n g: imgData.data[i + 1],\n b: imgData.data[i + 2],\n a: imgData.data[i + 3]\n },\n position: {\n x: x,\n y: y\n }\n };\n result.push(pixel);\n if (x >= result.width - 1) {\n x = 0;\n y++;\n } else {\n x++;\n }\n }\n result.maxLab = maxLab;\n result.minLab = minLab;\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"function posterized(centroids, imageData) {\n const context = DOM.context2d(imageData.width, imageData.height, 1);\n const canvas = context.canvas;\n\n const imageData2 = context.getImageData(\n 0,\n 0,\n imageData.width,\n imageData.height\n );\n\n for (let i = 0; i < imageData.data.length; i += 4) {\n const rgb = [\n imageData.data[i],\n imageData.data[i + 1],\n imageData.data[i + 2]\n ];\n\n const closest = {\n centroid: centroids[0],\n distance: distance(rgb, centroids[0])\n };\n\n for (let i = 1; i < centroids.length; i++) {\n const _distance = distance(rgb, centroids[i]);\n if (_distance < closest.distance) {\n closest.centroid = centroids[i];\n closest.distance = _distance;\n }\n }\n\n imageData2.data[i] = closest.centroid[0];\n imageData2.data[i + 1] = closest.centroid[1];\n imageData2.data[i + 2] = closest.centroid[2];\n imageData2.data[i + 3] = 255;\n }\n\n context.putImageData(imageData2, 0, 0);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"### Custom","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"function custom(canvas,d,callback) {\n let w = canvas.width;\n let h = canvas.height;\n\n const ctx = canvas.getContext(\"2d\");\n\n const tcan = callback(canvas,d)\n\n return tcan\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"### Filter\n","pinned":false,"hidden":false,"mode":"md"},{"id":236,"value":"function blur(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n \n context.save()\n context.filter = `blur(${(n)}px)`;\n context.drawImage(canvas,0,0)\n context.restore()\n\n return canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"function brightness(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n \n context.save()\n context.filter = `brightness(${(n)})`;\n context.drawImage(canvas,0,0)\n context.restore()\n\n return canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"function contrast(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n \n context.save()\n context.filter = `contrast(${(n)})`;\n context.drawImage(canvas,0,0)\n context.restore()\n\n return canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"function grayscale(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n \n context.save()\n context.filter = `grayscale(${(n)})`;\n context.drawImage(canvas,0,0)\n context.restore()\n\n return canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"function invert(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n \n context.save()\n context.filter = `invert(${(n)})`;\n context.drawImage(canvas,0,0)\n context.restore()\n\n return canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"function opacity(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n\n let tcan = DOM.canvas(canvas.width,canvas.height)\n const tcon = tcan.getContext(\"2d\")\n\n // tcon.filter =`opacity${(n)}`\n tcon.globalAlpha = n; \n tcon.drawImage(canvas,0,0)\n\n\n context.clearRect(0,0,canvas.width,canvas.height)\n context.drawImage(tcan,0,0)\n\n return canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"function saturate(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n \n context.save()\n context.filter = `saturate(${(n)})`;\n context.drawImage(canvas,0,0)\n context.restore()\n\n return canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"function sepia(canvas,n) {\n\n let context = canvas.getContext(\"2d\")\n \n context.save()\n context.filter = `sepia(${(n)})`;\n context.drawImage(canvas,0,0)\n context.restore()\n\n return canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":969,"value":"function transform_toColor(canvas,n,color=\"#09f\") {\n//for now color can only be hexadecimal\n\nlet context = canvas.getContext(\"2d\")\n \ncontext.save()\n\n\ncontext.globalAlpha = n;\n\n\ncontext.fillStyle = color;\ncontext.fillRect(0, 0, canvas.width, canvas.height);\n\n context.drawImage(canvas,0,0)\ncontext.restore()\nreturn canvas\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"# UTILS ","pinned":false,"hidden":false,"mode":"md"},{"id":897,"value":"function autoRatio(img,width,height) {\n\n const tw = testContainerSize(width)\n const th = testContainerSize(height)\n\n if (tw && th) {\n return [+width,+height]\n \n } else if (tw && !th) {\n \n const t = img.naturalHeight*width/img.naturalWidth\n \n return [+width,t]\n \n }\n else if (!tw && th) {\n \n const t = img.naturalWidth*height/img.naturalHeight\n return [+t,+width]\n \n }\n else if (!tw && ! th) {\n return [+img.naturalWidth,+img.naturalHeight]\n }\n else {\n return 'HOW?'\n }\n\n return 'HOW?x2'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":903,"value":"function testContainerSize(size) {\n if (size == null || size == undefined || size == \"\" || size ==0 ) \n return false\n return true\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":742,"value":"import {carved,verticalCarve} from \"8819abd6dadb45ea\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}