DEV Community

Cover image for Draw on the HTML canvas without code
UnionForever
UnionForever

Posted on

1 1 1 1

Draw on the HTML canvas without code

I was recently creating a web game. Now, while creating graphics for this game (characters, map etc), I saw that under the HTML canvas API, drawing even a single line took 4 lines of code-

ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(100, 200);
ctx.stroke();
Enter fullscreen mode Exit fullscreen mode

I knew that things like mapping out coordinates and rewriting repeated methods can easily be done by a no-code tool. This led to the creation of Canvascript. It's a open source tool whose purpose is to speed up the time it takes to create web game graphics.

Using it is simple, draw on the canvas, then click on the generate button to get the code to render the design on the actual HTML canvas. You can use the tool here. We also have a Discord server btw.

What do you think about this? any feedback or suggestions?

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (1)

Collapse
 
mulu_hunegnaw_b97b522fcdd profile image
Mulu Hunegnaw •

That's great 😊

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay