Share your repls and programming experiences

← Back to all posts
JS Canvas UI
EpicRaisin

JS Canvas UI

This repl is part of the JS Canavs Project, a group that develops tools and tutorials for the powerful HTML canvas element.

What is this repl about?

JS Canvas UI is a tool which will help you create UI that you can use with plain JS/HTML canvas. It includes a simple object hierarchy, an easy-to-use attribute editor, a central preview canvas, and yes, clickable buttons.

Creating and editing objects

In the hierarchy, the top should have two buttons. Clicking one of those buttons will let you add a button or text. Once you create the new object, it will appear on the canvas and a button for it will appear in the hierarchy. Clicking the button in the hierarchy will make some buttons and text appear in the editor bar. You can then edit the attributes of the object and they will be saved, and the preview will update.

Buttons and text

There are two objects available right now, buttons and text. Both have different attributes that change different things about it.

Buttons

  • X - Defaults to 0. Controls the X axis of the object's position. Coordinates are based on the center of the canvas.
  • Y - Defaults to 0. Controls the Y axis of the object's position. Coordinates are based on the center of the canvas.
  • Width - Defaults to 50. Controls the width of the button.
  • Height - Defaults to 50. Controls the height of the button.
  • Text - Defaults to "Button". Controls the text to be displayed on the button.
  • Font size - Defaults to 7. Controls the size of the text.
  • Font family - Defaults to "sans-serif". Controls the font family of the text. Any valid CSS font family will work.
  • Border color default - Defaults to "#555". Controls the color of the border when the mouse is not over the button. Any valid CSS color will work.
  • Background color default - Defaults to "#bfbfbf". Controls the color of the background when the mouse is not over the button. Any valid CSS color will work.
  • Border color hover - Defaults to "#7c7c7c". Controls the color of the border when the mouse is over the button. Any valid CSS color will work.
  • Background color hover - Defaults to "#d8d8d8". Controls the color of the background when the mouse is over the button. Any valid CSS color will work.

Text

  • X - Defaults to 0. Controls the X axis of the object's position. Coordinates are based on the center of the canvas.
  • Y - Defaults to 0. Controls the Y axis of the object's position. Coordinates are based on the center of the canvas.
  • Text - Defaults to "Text". Controls what the text says.
  • Font size - Defaults to 20. Controls the size of the text.
  • Font family - Defaults to "sans-serif". Controls the font family of the text. Any valid CSS font family will work.
  • Color - Defaults to "#555". Controls the color of the text. Any valid CSS color will work.

Inserting the code into your script

To insert the code for the UI into your script, follow the instructions in the Copy window.

Join the JS Canvas Project

If you enjoyed this project or you are skilled with the canvas element and you want to join the JS Canvas Project, then comment below that you want to join and I'll add you to the team!

Note: I will be off repl.it February 10th to February 17th on a trip, so I will not be able to answer comments until maybe the 18th

Voters
AmoghTheCool
EpicRaisin