Notes on computer graphics, pixel art and the math behind them. Most posts let you edit the code and watch it redraw.

Ivan Kubota · since 2012
Reference · canvaskit-wasm Skia Docs Every type, factory and enum of canvaskit-wasm, each with a live demo you can edit. Open the docs →

Useful tools

Potion GeneratorShape, light and export pixel art bottles.
CombinatorMarkov chain text chains generator. Use it, it is free.
Total border-radius creatorAssymetric border radius wizard (CSS)

GitHub repos

pipe2jsMap, filter and reduce stdin with JavaScript.simplest-domTiny DOM for server rendering and tests.react-vanillaJSX style h() that builds real DOM nodes.png-paletteChange colors in the palette of a PNG.

2026

canvaskitgraphics29 Apr

CanvasKit Docs

Documentation that I wish to find when I learnt Skia CanvasKit. But there was none, so I've built one myself

2025

mathtransformationmatrix10 Jan

Transformation Matrix

Live playground that would help you to feel how 2D transformation matrixes are working. Rotation, Scaling, Flipping, Offsetting, Skewing. All are there. With my attempt to explain how they are working. Basic trigonometry knowledge is required for understanding.

2024

EXPERIMENT
csssvg27 Jun

Outline Offset

Trying to extract stroke outline out of SVG + CSS outline property. Atempt failed
EXPERIMENT
canvasfonttypography04 May

Letter Work

Drawing, and measuring text on cavas. Checking how emojis are working. SImple skew animation
algorithmmathpowcryptography25 Apr

PoW Captcha

Captcha implementation that is close to the mining process. It could be used against simple spam bots, and user with seak laptops
toolpixelart04 Apr

Potion Generator

Shape, light and export pixel art bottles.
noiseperlinjupiterglsl29 Mar

Jupiter Shader

Simple technique of making turbulent-like noise by applying simplex noise to itself multiple times. Most of the article I am writing GLSL shader.
pixelartnoiseperlinhistory28 Mar

Ken Perlin Noise

Great article by Ken Perlin that I find in the cellar of WayBack Machine. Made an article out of old days presentation
EXPERIMENT
pixelartsound27 Mar

Audio Voronoi

Trying to squeeze some noise out of Voronoi Diagram
EXPERIMENT
pixelartsound25 Mar

Audio orbits

Generating a bit of sound in JavaScript. Simple melody generator, and Piano example

2023

EXPERIMENT
pixelart19 May

Glitch Animal

Pixelart experiment of drawing elephant-like animated creature

2022

toolmap-reducejsfunctionalproject12 Nov

Pipe 2 JS

Open Source Swiss knife for stream processing JSONs. It could process gigabytes of data in seconds with full support of js maps and reducers
webglcanvasplanet3dpixelartsimulation13 Feb

Solar System

Trying Three-fiber for setting up the solar system 3D scene. Playing with shaders
webglsphere3d09 Jan

WebGL Sphere

Building sphere from scratch. Mesh by mesh, and shading the result

2021

linuxnodejstool28 Aug

Deploy standard Node.js service

Setting up the Node server with some duct tape. Step by step
renderer03 Jun

Diamond gradient

How to modify skia shader to draw the diamond gradient
renderer01 Mar

CanvasKit

A bundle for using Skia in the web via webassembly. It could do everything, but you should know what you are doing, how memory is allocating, and details of cpp implementation to work with it.
rendererskia01 Feb

What is Skia

Best graphics library that exist today. It have a steep learning curve.
pixelartbrickslightshade04 Jan

Bricks with shading

Casting light to brickwall with dot product
pixelartbricks03 Jan

Bricks

Drawing pixelart brick wall

2020

clusterizingface-api.jsk-mean29 Jul

Face Colors Extraction

Approximate color of face part by mixing face marks recognition with approximation of colors through the CIELAB color space.
physicsprojectionspixelart13 May

Projections

Precise 2D physics, and collisions calculation. Simple math and a lot of examples
pixelarttriangle fill11 May

Draw a triangle

How to filling a triangle pixel by pixel
pixelartvoronoi31 Mar

Voronoi Diagram

Closest point give us this well known pattern. It is widely used in computer graphics, and during medieval plagues source approximations.

2019

pixelartchallengegameOfLife15 Dec

Game of life

Only here: Conway game of life drawn as pixelart!
EXPERIMENT
pixelarthousewoods08 Dec

Grass

Drawing some grass.
pixelartfire06 Dec

Fire

Oldschool technique of drawing cozy pixelart fire
pixelartsky05 Dec

Sky

Pixelart sky. Some stars, some dithering, and comets
combinationstool29 Nov

Combinator

Markov chain text chains generator. Use it, it is free.
border-radiuscsswizardtool29 Nov

Total border-radius creator

Handy tool for creating assymetric border-radiuses. Copy css, share unique radiuses with your friends!
EXPERIMENT
colortool14 Apr

Colors

Drawing LAB color space

2018

pixelartpixel28 May

Simple font

Added support of non monospace pixelart fonts, now I could write text!
pixelartpixel11 May

Load and draw sprites

Just added image loading and drawing support for pixelart library
pixelartpixel07 Feb

Layers

Layer system for pixelart engine. Now I could draw multiple graphic layers, and update them individually!
pixelartanimationpixel04 Feb

Animation

it is alive!

2017

projectnode.js12 Jun

Simplest DOM

Headless DOM implementation. No dependencies. Great for tests, and crawlers.

2016

datamap-reducefunctional12 Nov

Map Filter Reduce

Map-reduce: scalable pattern for any data processing
historygraphicspixel14 Aug

Simplest shape (line)

Complexity of drawing a simple line. From old to modern GPU implementations
pixelartpixel03 Feb

Pixel

I made a pixelart engine for this blog. It draws only updated pixels, and would be useful for all future articles

2015

randommath03 Feb

Random

Find out how pseudo-random works, play with seeded random

2014

EXPERIMENT
js01 Mar

Play with With

JavaScript checking a cornercase with `with`

2013

gameprojectrobbo30 Dec

Robbo

This was my favorite game on Atari before I went to school. With all respect I made a clone of it in JavaScript. Here you could read how it was, and play it.

2012

jsprototype13 Sep

Prototype Inheritance

Learn how prototype inheritance is working in JavaScript

2018

renderer05 Sep

Renderer Series - Why not raw WebGL

The hidden complexity of building a 2D renderer from scratch
renderer04 Sep

Renderer Series - Why not SVG

The DOM overhead and flexibility limits of SVG for vector editors
renderer03 Sep

Renderer Series - Why not Fabric.js

Why existing canvas libraries don't solve the vector network problem
renderer02 Sep

Renderer Series - Why not canvas 2D

Where Canvas2D falls short for professional vector graphics
renderer29 Aug

Renderer Series - Binding UI to Objects

Building a dynamic inspector that reflects and modifies object state
renderer25 Aug

Renderer Series - Editor Modes

Managing complex UI states with clean mode transitions
renderer21 Aug

Renderer Series - Blend Modes

Implementing Figma Blend Modes in Skia
renderer19 Aug

Renderer Series - Corner Radius

Corner Radius Algorithm
renderer15 Aug

Renderer Series - Hit Testing

Efficient object selection with spatial indexing and point-in-polygon testing
renderer10 Aug

Renderer Series - Capturing Canvas

When readPixels become a bottleneck
renderer03 Aug

Renderer Series - CanvasKit Build

Shrinking the build of CanvasKit
renderer29 Jul

Renderer Series - Simplified Matrix

Understanding how translation, rotation, and scale combine into a single matrix
renderer28 Jul

Renderer Series - Caching effects

Do not recreate effect shaders in skia
renderer24 Jul

Renderer Series - Loop detection

How to detect a loop
renderer17 Jul

Renderer Series - Extend Vertex Count

Migrating to int32 in vertex count
renderer10 Jul

Renderer Series - Primitive shapes

Building parametric shapes with interactive manipulation handles
renderer03 Jul

Renderer Series - Transformation matrix

Adapt skia transformation matrix
renderer27 Jun

Renderer Series - Image Filters

Figma like image filters
renderer23 Jun

Renderer Series - Skia Path Transform

Drawing same path transformed is slow in skia
renderer17 Jun

Renderer Series - Loops and Fills

Determine when loops are closed

2017

renderer10 Jun

Renderer Series - Layer Opacity

How layers are mixed
renderer03 Jun

Renderer Series - Masking

Masking, Clipping and Effects pipeline
renderer24 May

Renderer Series - Caps Joins Dashes

How line caps works
renderer24 May

Renderer Series - Linear Burn

Linear burn blending
renderer15 May

Renderer Series - Dashes Figma Style
renderer05 May

Renderer Series - Stroke Join
renderer14 Apr

Renderer Series - Round Corners
renderer05 Apr

Renderer Series - Out Caps
renderer27 Mar

Renderer Series - Line and Bezier
rendererwasm24 Mar

Renderer Series - WebAssembly Memory
renderer15 Mar

Renderer Series - CanvasKit Layers
renderer07 Mar

Renderer Series - CanvasKit Path
renderer04 Jan

Renderer Series