Course Schedule

HTML Graphics

• HTML Graphics

HTML Drawing

• Graphics
• Canvas
• Plotly.js
• Chart.js
• Google
• D3.js

Google Maps

• Maps Introduction
• Maps Basics
• Maps Overlay
• Maps Event
• Maps Control
• Maps Type
• Maps Reference Manual

SVG Tutorial

• SVG Introduction
• Embed SVG in HTML
• SVG Rectangle
• SVG Circle
• SVG Ellipse
• SVG Straight Line
• SVG Polygon
• SVG Line
• SVG Path
• SVG Text
• SVG Stroke
• SVG Filters
• SVG Blur
• SVG Shadows
• SVG Linear Gradients
• SVG Radial Gradients
• SVG Examples
• Reference Manual for SVG

Canvas Tutorial

• Canvas Introduction
• Canvas Drawing
• Canvas Coordinates
• Canvas Line
• Canvas Shape
• Canvas Rectangle
• Canvas Circle
• Canvas Curve
• Canvas Gradient
• Canvas Text
• Canvas Image

Canvas Clock

• Clock Introduction
• Clock Face
• Clock Numbers
• Clock Hands
• Clock Start

HTML Game

• Game Introduction
• Game Canvas
• Game Components
• Game Controllers
• Game Obstacles
• Game Scores
• Game Images
• Game Sounds
• Game Gravity
• Game Bounce
• Game Rotation
• Game Movement

Elective Courses

Course Recommendation:

• CodeW3C.com Toolbox

JavaScript graphics library

a JavaScript library for artificial intelligence graphics and other charts:

• Plotly.js
• Chart.js
• Google Chart

Google Maps

By usingGoogle MapsWe can embed maps into HTML.

SVG

HTML <svg> elementIt can realize vector graphics in HTML:

HTML Canvas

HTML <canvas> elementIt can be used to draw graphics on web pages:

The following is created using <canvas>:

It displays four elements: red rectangle, gradient rectangle, multicolored rectangle, and multicolored text.

Toolbox

Canvas API

Sponsor Links