Open in app

Sign In

Write

Sign In

Tom Cantwell
Tom Cantwell

12 Followers

Home

About

Apr 23, 2021

Building the Magic Wand Tool for a Drawing App, pt. 1

In my drawing app, Pixel V, I have a color replace tool that lets you restrict where the brush makes a mark to only a chosen color. When the brush was limited to a single pixel width, I just checked the canvas for the color of the pixel at the…

2 min read

Building the Magic Wand Tool for a Drawing App, pt. 1
Building the Magic Wand Tool for a Drawing App, pt. 1

2 min read


Apr 16, 2021

Adding Layers to A Drawing App, pt. 2

In part 1, we rendered the layers to the DOM, and now we’re going to make it so the layers can be rearranged and interacted with from the DOM. The important lines here are the ones setting each layer element to draggable: true and associating the actual layer object with…

3 min read

Adding Layers to A Drawing App, pt. 2
Adding Layers to A Drawing App, pt. 2

3 min read


Apr 9, 2021

Adding Layers to A Drawing App, pt. 1

This won’t be much of a tutorial, but this is a glimpse into my initial attempt to add layers to a drawing app. This is the first time I’ve really thought keeping a state would be useful, so that’s probably the direction I’ll be moving in the future. …

2 min read

Adding Layers to A Drawing App, pt. 1
Adding Layers to A Drawing App, pt. 1

2 min read


Apr 1, 2021

Create Pixel Art with CSS

Try it here. You may have seen articles about using the box-shadow property in CSS to make pixel art. The process involves creating an element with the width and height of a pixel, and creating a box-shadow for each pixel. It looks something like this:

Pixel Art

2 min read

Create Pixel Art with CSS
Create Pixel Art with CSS
Pixel Art

2 min read


Mar 25, 2021

Create a Custom Upload Button in JavaScript

For my pixel art app, Pixel V, I want to make it easy to use a reference image layered behind or on top of the user’s drawing. …

2 min read

Create a Custom Upload Button in JavaScript
Create a Custom Upload Button in JavaScript

2 min read


Mar 18, 2021

Custom Bezier Tool for Pixel Art

Try it here. In my pursuit to render a well-aliased bezier curve for a pixel art tool, I came upon a paper on rasterizing curves by Alois Zingl. The paper covers many types of curves, but I’m just going to focus on quadratic bezier curves. The code in the paper…

3 min read

Custom Bezier Tool for Pixel Art
Custom Bezier Tool for Pixel Art

3 min read


Mar 11, 2021

Custom Bezier Curve Tool for HTML Canvas, pt. 2

Last time we rendered the curve by connecting the pixels with a series of lines, creating a polyline that estimates the bezier curve. That method may work sometimes, but it often produces artifacts when used for pixel art. This time we’re going to try plotting each pixel one after another…

4 min read

4 min read


Mar 5, 2021

JS: Making a Color Picker from Scratch, part 3

To give a color picker the expected behavior, there are some tricks to how you set up the interaction between the gradient canvas and the user’s mouse. …

2 min read

2 min read


Feb 26, 2021

How to use UUID for Rails API

In application.rb, add the following line: config.generators do |g| g.orm :active_record, primary_key_type: :uuid end Create a new migration from the command line: rails g migration enable_uuid You should get a file that looks like this: class EnableUuid < ActiveRecord::Migration[6.0] end Then add this method inside that migration to enable uuid: class EnableUuid < ActiveRecord::Migration[6.0] def change enable_extension 'uuid-ossp' enable_extension 'pgcrypto' end end

1 min read

1 min read


Feb 19, 2021

JS: Making a Color Picker from Scratch, part 2

Try it here. Last time I went over the basic layout in HTML and CSS. Now I’ll go over creating the gradients and user interaction. Let’s start by creating a Picker class and assigning all the buttons to associate with. …

Color Picker

4 min read

JS: Making a Color Picker from Scratch, part 2
JS: Making a Color Picker from Scratch, part 2
Color Picker

4 min read

Tom Cantwell

Tom Cantwell

12 Followers

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams