Learn Canvas, Jspm and Mdx

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

A <canvas> element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

canvas

Learn some of the different ways you can affect the graphical content that you are drawing to a canvas. We'll cover global alpha, global composite operations and shadows.

Canvas Effects

With the HTML `canvas` you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

Drawing Text on Canvas

In this lesson, we cover several different ways to animate graphics drawn to Canvas.

Animating with Canvas

When drawing on the HTML5 canvas element, your fills aren't limited to flat colors. You can use gradients to get smoothly blended color fills on your drawn elements.

Gradient Fills on the HTML5 Canvas

Transformations can change the default canvas coordinate system and create complex drawings with much less code.

Canvas Transformations

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

Listening for Mouse and Keyboard Events with HTML Canvas

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about `<canvas>`, and get ready to start drawing.

Introduction to the HTML Canvas element

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

Drawing Paths - Lines and Rectangles

When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.

Drawing Paths - Curves and Arcs

You aren't limited to boring black lines when drawing on the HTML5 canvas element. Using styles, you can program interesting colorful images with JavaScript.

Drawing Styles on HTML5 Canvas

In this lesson, you'll learn how to read and write individual pixel color values from a canvas.

Canvas and Pixels

In addition to vector drawing, you can draw bitmap images into a canvas, and also retrieve a bitmap based on the content in a canvas.

HTML Canvas and Images

jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader.

jspm

JSPM can handle installed packages, transpiling ES6, and bundling all from the command-line. This video gives a quick overview of install JSPM, installing packages with JSPM, writing a very simple app in ES6 that uses those packages, then bundling up for production.

An Introduction to JSPM (JavaScript Package Manager)

The `canvas` element exposes a 2d context which allows you to draw lines using the `moveTo`, `lineTo`, and `stroke` api. You can combine this with Mouse events to make a simple drawing app.

Draw with Your Mouse on an HTML Canvas

Monica Powell, creator of React Ladies, talks through why someone would migrate from Remark to MDX before going into how to do that and what problems you might run into.

Migrating to MDX

Cole Bemis explains how MDX works by taking us though his own journey digging into what MDX does under the hood.

Demystifying MDX

Laurie Barth walks us through MDX v2's syntax by trying to break it. She starts at markdown syntax and takes us through increasingly complex applications of MDX, including passing dynamic props to .mdx files imported into other .mdx files.

MDX v2 Syntax

Jonathan Bakebwa introduces MDX support for VueJS and NuxtJS while also using Chakra UI Vue for MDX components

MDX and VueJS/NuxtJS

Prince Wilson, MDX contributor, takes us through one aspect of his personal site playground and dives deep into interactive code blocks.

Personal Site Playgrounds with MDX

Rodrigo Pombo introduces [Code Hike](https://codehike.org/) and talks through how Code Hike and MDX empower advanced scrolly telling techniques.

Search

Search Results