DEV Community

Cover image for Never code lines on the HTML canvas again
UnionForever
UnionForever

Posted on

2 1 1

Never code lines on the HTML canvas again

Would you like to spend your morning, afternoon and evening coding this with Rough.js, or worse, writing this with the canvas API?

A map of the US drawn roughly

or would you like to draw this in… 30 minutes without writing code?

Canvascript is an open source no code tool to make sure that you do not waste your time on writing code and tracking coordinates for doing something as creative as creating graphics for the canvas.

Simply draw your graphics, then click on the generate code button to get the code that renders your graphic on the HTML canvas

Why did I need to draw whatever this is?

You can draw straight lines, curved lines and even freehand.

You can control the color and width of your brush.

You can redo, undo and save your drawings.

You can test your graphics on multiple resolutions.

You can even import and export drawings if you want to edit someone else’s graphic

Hell, with some modifications to the source code, you can even make 3D drawings that render on the HTML canvas

All without writing a single line of code

Why the HTML canvas? because that’s the only standard on the web that’s performant and mobile friendly enough for web game devs. That makes it a tool for web game devs, in fact the repository’s main page makes that quite clear, but it can be useful to anyone making graphics that render fast and on mobile

You don’t have to install or download anything, you can open CS right by going to their repository on Github and clicking on their app’s link

                                    ***
Enter fullscreen mode Exit fullscreen mode

This is my first blog on writing about such amazing and underated open source projects for web game and frontend devs.

An underated project is a project is one which has < 50 stars and < 10 forks

Do you have any thoughts about this story? do you know or own any hidden gems? Let me know below



Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
eddocode profile image
Eddocode

Thanks for sharing such an amazing tool , i would give it a try 😄👌

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay