Writing a pure JavaScript QR code renderer can be a complex task, but here are the basic steps you can follow:

1. Choose a QR code generation library: There are several libraries available for generating QR codes in JavaScript, such as qrcode-generator and jsQR. Choose the one that suits your needs and follow its installation instructions.

2. Create a canvas element: You will need to create a canvas element on your webpage that will display the QR code.

3. Generate the QR code: Use the library you chose to generate the QR code. Pass in the data you want to encode and any other options you need.

4. Render the QR code on the canvas: Once you have the QR code data, you will need to render it on the canvas. You can do this by setting the canvas context to the QR code data and using the canvas API to draw the QR code.

Here is an example of how to generate and render a QR code using the qrcode-generator library:

```

// Create a canvas element

var canvas = document.createElement('canvas');

document.body.appendChild(canvas);

// Generate the QR code

var qr = qrcode(0, 'L');

qr.addData('Hello World!');

qr.make();

// Render the QR code on the canvas

var ctx = canvas.getContext('2d');

var size = qr.getModuleCount();

var cellSize = 5;

canvas.width = canvas.height = size * cellSize;

for (var row = 0; row < size; row++) {

for (var col = 0; col < size; col++) {

if (qr.isDark(row, col)) {

ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);

}

}

}

```

This example creates a canvas element, generates a QR code with the data "Hello World!", and then renders the QR code on the canvas using the canvas API.