Rename paint to canvas

src/canvas.js

@@ -1,30 +1,41 @@
 import { un_entity } from './utils/index';
 import Cache from './utils/cache';
 
-function draw_canvas(code, width, height, random) {
+let counter = 1;
+
+function draw_canvas(code) {
   let result = Cache.get(code);
   if (result) {
     return Promise.resolve(result);
   }
+  let name = 'css-doodle-paint-' + (counter++);
+  let wrapped = generate(name, code);
 
-  let canvas = document.createElement('canvas');
-  let ctx = canvas.getContext('2d');
-  let ratio = window.devicePixelRatio || 1;
-
-  canvas.style.width = canvas.width +'px';
-  canvas.style.height = canvas.height +'px';
-  canvas.width = width * ratio;
-  canvas.height = height * ratio;
-
-  ctx.scale(ratio, ratio);
-
+  let blob = new Blob([wrapped], { type: 'text/javascript' });
   try {
-    let fn = new Function(`return (ctx, width, height, random) => {${un_entity(code)}}`)();
-    fn(ctx, width, height, random);
-  } catch(e) {
-    // ignore
+    if (CSS.paintWorklet) {
+      CSS.paintWorklet.addModule(URL.createObjectURL(blob));
+    }
+  } catch(e) {}
+
+  return Promise.resolve(Cache.set(code, `paint(${name})`));
+}
+
+function generate(name, code) {
+  code = un_entity(code);
+  // make it so
+  if (!code.includes('paint(')) {
+    code = `
+      paint(ctx, {width, height}, props) {
+        ${code}
+      }
+    `
   }
-  return Promise.resolve(Cache.set(code, canvas.toDataURL()));
+  return `
+    registerPaint('${name}', class {
+      ${ code }
+    })
+  `;
 }
 
 export {

src/generator.js

@@ -139,9 +139,9 @@ class Rules {
                 case 'shaders':
                   return this.compose_shaders(value, coords);
                 case 'canvas':
-                  return this.compose_canvas(value, coords);
+                  return this.compose_canvas(value, arg.arguments.slice(1));
                 case 'paint':
-                  return this.compose_paint(value, arg.arguments.slice(1));
+                  return this.compose_paint(value);
               }
             }
           }
@@ -182,23 +182,23 @@ class Rules {
     return '${' + id + '}';
   }
 
-  compose_canvas(code, {x, y, z}) {
-    let id = this.unique_id('canvas');
-    this.canvas[id] = {
+  compose_paint(code, {x, y, z}) {
+    let id = this.unique_id('paint');
+    this.paint[id] = {
       code,
       cell: cell_id(x, y, z)
     };
     return '${' + id + '}';
   }
 
-  compose_paint(code, rest = []) {
+  compose_canvas(code, rest = []) {
     let commands = code;
     let result = rest.map(group => get_value(group[0])).join(',');
     if (result.length) {
       commands = code + ',' + result;
     }
-    let id = this.unique_id('paint');
-    this.paint[id] = { code: commands };
+    let id = this.unique_id('canvas');
+    this.canvas[id] = { code: commands };
     return '${' + id + '}';
   }
 
@@ -236,10 +236,10 @@ class Rules {
                     result += this.compose_doodle(value); break;
                   case 'shaders':
                     result += this.compose_shaders(value, coords); break;
-                  case 'canvas':
-                    result += this.compose_canvas(value, coords); break;
                   case 'paint':
-                    result += this.compose_paint(value, val.arguments.slice(1)); break;
+                    result += this.compose_paint(value); break;
+                  case 'canvas':
+                    result += this.compose_canvas(value, val.arguments.slice(1)); break;
                 }
               }
             } else {

src/index.js

@@ -6,7 +6,6 @@ import seedrandom from './lib/seedrandom';
 import { svg_to_png } from './svg';
 import { draw_shader } from './shader';
 import { draw_canvas } from './canvas';
-import { make_paint } from './paint';
 import { uniform_time } from './uniform';
 
 import get_props from './utils/get-props';
@@ -234,16 +233,12 @@ class Doodle extends HTMLElement {
     });
   }
 
-  canvas_to_image({ code, cell }, fn) {
-    let element = this.doodle.getElementById(cell);
-    let { width, height } = element && element.getBoundingClientRect() || {
-      width: 0, height: 0
-    };
-    draw_canvas(code, width, height, this.random).then(fn);
+  paint_to_image({ code, cell }, fn) {
+
   }
 
-  paint_to_image({ code, cell }, fn) {
-    make_paint(code).then(fn);
+  canvas_to_image({ code }, fn) {
+    draw_canvas(code).then(fn);
   }
 
   shader_to_image({ shader, cell }, fn) {
@@ -300,8 +295,9 @@ class Doodle extends HTMLElement {
     let path_ids = Object.keys(paths);
     let canvas_ids = Object.keys(canvas);
     let paint_ids = Object.keys(paint);
+    let length = doodle_ids.length + canvas_ids.length + shader_ids.length + path_ids.length + paint_ids.length;
     return input => {
-      if (!doodle_ids.length && !shader_ids.length && !path_ids.length && !canvas_ids.length && !paint_ids.length) {
+      if (!length) {
         return Promise.resolve(input);
       }
       let mappings = [].concat(
@@ -333,13 +329,7 @@ class Doodle extends HTMLElement {
           }
         }),
         paint_ids.map(id => {
-          if (input.includes(id)) {
-            return new Promise(resolve => {
-              this.paint_to_image(paint[id], value => resolve({ id, value }));
-            });
-          } else {
-            return Promise.resolve('');
-          }
+          return Promise.resolve('');
         }),
         path_ids.map(id => {
           if (input.includes(id)) {
@@ -355,14 +345,14 @@ class Doodle extends HTMLElement {
           mapping.forEach(({ id, value }) => {
             input = input.replaceAll(
               '${' + id + '}',
-              /^paint/.test(id) ? value : `url(${value})`
+              /^canvas/.test(id) ? value : `url(${value})`
             );
           });
         } else {
           mapping.forEach(({ id, value }) => {
             input = input.replace(
               '${' + id + '}',
-              /^paint/.test(id) ? value : `url(${value})`
+              /^canvas/.test(id) ? value : `url(${value})`
             )
           });
         }

src/paint.js

@@ -1,43 +1,5 @@
-import { un_entity } from './utils/index';
 import Cache from './utils/cache';
 
-let counter = 1;
-
-function make_paint(code) {
-  let result = Cache.get(code);
-  if (result) {
-    return Promise.resolve(result);
-  }
-  let name = 'css-doodle-paint-' + (counter++);
-  let wrapped = generate(name, code);
-
-  let blob = new Blob([wrapped], { type: 'text/javascript' });
-  try {
-    if (CSS.paintWorklet) {
-      CSS.paintWorklet.addModule(URL.createObjectURL(blob));
-    }
-  } catch(e) {}
-
-  return Promise.resolve(Cache.set(code, `paint(${name})`));
-}
-
-function generate(name, code) {
-  code = un_entity(code);
-  // make it so
-  if (!code.includes('paint(')) {
-    code = `
-      paint(ctx, {width, height}, props) {
-        ${code}
-      }
-    `
-  }
-  return `
-    registerPaint('${name}', class {
-      ${ code }
-    })
-  `;
-}
-
-export {
-  make_paint
+export function make_paint() {
+  return '';
 }