Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

How to Create an HTML Canvas Editor with Clojure and FabricJS

In this chapter, we will integrate FabricJS with our app and create an HTML canvas-based editor.

This page is a preview of Tinycanva: Clojure for React Developers

Previous Lesson:

Using React Higher Order Components to Frame a Canvas Editor

Next Lesson:

Saving graphics

New
-:--3
-:--2

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tinycanva: Clojure for React Developers

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Getting Started

Lesson 1:

Clojure Tutorial - Installing and Testing Required Dependencies

Lesson 2:

Editor Tools

Lesson 3:

How to Set up Visual Studio Code for Clojure Development

Lesson 4:

Clojure IDE Setup - Using the Cursive Plugin With IntelliJ

Lesson 5:

How to Use Emacs with Clojure - 6 Packages You'll Need

Module 2: Language Semantics

Lesson 1: (2:31)

Understanding the Benefits of Clojure's Hosted Nature

Lesson 2: (12:35)

Clojure Basics - Syntax and Native Data Types

Lesson 3: (2:20)

What is Syntaxlessness? How to Write More Expressive Code

Lesson 4: (3:16)

Clojure Build Tools - Leiningen, Boot, Shadow CLJS & Figwheel

Lesson 5: (11:12)

How to Set Up a Shadow CLJS Project From Scratch

Lesson 6: (9:00)

Getting Familiar With The Shadow CLJS API

Lesson 7: (9:06)

An Introduction to Clojure REPL and Evaluating Code Inline

Lesson 8:

A Clojure Beginner's Guide to Structural Editing with Paredit

Module 3: Standard Library

Lesson 1: (4:08)

Clojure Conditionals - Understanding Flow Control Operators

Lesson 2: (4:39)

Atoms in Clojure - How to Create and Manipulate Them

Lesson 3: (7:47)

Clojure Functions - Definitions, Distinctions, and Examples

Lesson 4: (12:22)

Sequence Operations

Lesson 5: (4:04)

Threading Macros in Clojure - Thread-Last vs Thread-First vs As

Lesson 6: (5:09)

Clojure Constructs and Techniques to Interact with JavaScript

Module 4: Tinycanva

Lesson 1: (2:36)

Overview

Lesson 2: (6:22)

Clojure Project Setup with create-cljs-app

Lesson 3: (7:08)

What is Reagent? The Minimalist Clojurescript React Wrapper

Lesson 4:

How to Install React Router from NPM and Set Up Routes

Lesson 5:

How to Set Up a UI Library & CSS Build Process Using PostCSS

Lesson 6: (9:27)

Introduction to React State Management

Lesson 7: (1:55)

App Structure and Authentication UI

Lesson 8:

Setting Up Firebase Projects and Authentication for Clojure Apps

Lesson 9: (4:38)

Auth Event Handlers

Lesson 10: (6:58)

Auth Effects and Firebase Initialization

Lesson 11: (6:46)

How to Create Firebase Data Subscriptions in Reframe

Lesson 12:

How to Build Reusable Containers for Clojure Apps with Reagent

Lesson 13:

How to Store Reframe Data in Firebase Without a REST API

Lesson 14:

Read and Delete Graphics