Ability to make <canvas> elements and script them with JS

Feature Suggestions
#1

@Luxapodular @Jovanny

Has this feature been suggested before?
No

Is your feature request related to a problem? Please describe.
This isn’t related to a problem, but it would be SO useful to be able draw graphs, graphics, edit photos, script animations, and use and make interactive video (SO many people have asked for this)

Describe the solution you’d like
I’d love to be able to drag and drop/make with a script a canvas element and then add a script to it to draw graphics, animations, graphs, edit photos, and HAVE VIDEO (AND MAKE IT INTERACTIVE). A library that would be ABSOLUTELY PERFECT for wick to make HTML5 elements is pixijs: https://pixijs.io/

Describe alternatives you’ve considered
I do not know of any alternatives to script graphics and video.

Image/Video Explanation Optional
You should be able to script graphics like seen here:

Additional context

What is a canvas element?

is an HTML element which can be used to draw graphics via scripting. They can be used to draw graphs, combine photos, or create simple (and not so simple) animations.

2 Likes
#2

YES! I was just trying to do that this week - did not succeed :sob:

1 Like
#3

IK THIS WOULD BE AMAZING!!
And you could do machine learning things like facial recognition and stuff

#4

You “can” do this (I’ve done it before)

Here’s an example project:
canvas4-7-2021_10-50-58.wick (1.5 KB)

It makes a png file of a green square (which was created with raw code)

Expected results:
TEST

Code:

// Step 1: Create canvas
project.canvas=document.createElement("canvas"); 

// Set width/ height of canvas
project.canvas.width=100;
project.canvas.height=100;

// Add a 2d shape to canvas
const shape1=project.canvas.getContext('2d');

// Set shape color
shape1.fillStyle='green';
// Set top left point x, and y, and the width and height going right/ down
shape1.fillRect(0, 0, 10, 10); 

// Get a "url" for the canvas
var url=project.canvas.toDataURL(); 

// Download as png (credit to pumpkinhead for helping me with this)
var a=document.createElement('a'); 
a.download='TEST.png';
a.href=url;

// Download canvas as png :) 
a.click();

// Any help needed, let me know -H.A.

If this isn’t what you meant, let me know

3 Likes
#5

Yeah this is what I’m going for