Summary

While RPGWizard has a large number of drawing functions designed to cover the basics sometimes you might need to do more advanced drawing techniques. Fortunately the RPGWizard engine has access to all the standard browser JavaScript drawing functions listed by w3schools, in fact the RPGCode drawing functions essentially act as wrappers around these lower level functions for you:

• HTML Canvas Graphics
• HTML Canvas Reference

A really good in-depth example of this is the Weather Effects that the RPGWizard includes:

• Weather Effects

Steps

Getting a 2D Context

You can gain access to the 2D context of any canvas you created simply by using:

// Create a canvas
rpgcode.createCanvas(300, 300, "myCanvas");

// Access rpgcode.canvases by key for our canvas
const canvas = rpgcode.canvases["myCanvas"].canvas;

// Get its drawing context
const ctx = canvas.getContext("2d");

Drawing a Circle

We can use any one of the w3schools examples to draw our own shapes and text to a canvas directly:

// Use hex-decimal red
ctx.strokeStyle = "#FF0000";

// Draw a red circle
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Complete Example

// Create a canvas
rpgcode.createCanvas(300, 300, "myCanvas");

// Access rpgcode.canvases by key for our canvas
const canvas = rpgcode.canvases["myCanvas"].canvas;

// Get its drawing context
const ctx = canvas.getContext("2d");

// Use hex-decimal red
ctx.strokeStyle = "#FF0000";

// Draw a red circle
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

// Draw it to the screen
rpgcode.renderNow("myCanvas");