JSlix is a graphic engine created for loading up images within the HTML DOM on the fly. It is optimized for speed and for taking as little memory as possible for image handling. This document will go over how to use JSlix and the features it has in accordance to Custom Wars Tactics.

• Add, store, and retrieve images from HTML Image tag
• Add palettes which will allow color changes on the fly
• Add and retrieve images directly from the HTML DOM
• Access various editing features for the image dynamically
  • Flip image pixels by horizontal and/or vertical axis
  • Rotate an image by 90 clockwise
  • Invert the colors of an image
  • Use a palette to change the colors of an image
  • Merge the pixels of two separate images together
  • Shift one or multiple rows and/or columns of pixels in an image
  • Place one image on top of another image
  • Cut an image down to a specific size

JSlix was built with ES-6 in mind, and uses the export function to remain modular.

• Place JSlix in the web folder
• Use 'import * as jslix from "../jslix.js"'

Image Library follows a specific flow of control. Let's say we have a folder that looks like this:

• coolimg.png
• index.html

To add 'coolimg.png' to ImageLibrary, you use the add Image command

• jslix.addImage("coolimage.png")

To retrieve an image, you use the get command. Images are stored in an array, so the first image you stored will be at '0'

• jslix.getImg(0)

To display, you'll have to add the image to a canvas that can display it.

• ctx = canvas.getContext("2d");
• ctx.clearRect(0, 0, canvas.width, canvas.height);
• ctx.drawImage(jslix.getImg(0), 10, 10);

The power of JSlix is the ability to edit images on the fly. This is performed by using attributes. Let's say we wanted to mirror an image on the Y-axis. This is the flow:

• jslix.addFlipY()

• jslix.addImage("coolimage.png")

• ctx.drawImage(jslix.getImg(0), 10, 10);

Any alters you want to perform on an image are calculated before the image is added, then the image gets stored into memory. This also applies if you want to do multiple edits to an image.

• jslix.addFlipY()

• jslix.addFlipX()

• jslix.addImage("coolimage.png")

• ctx.drawImage(jslix.getImg(0), 10, 10);

Editing can be stacked by using old images to create new ones. This will take the an older image, perform edits, and save it as a new one dynamically

• jslix.rotate90()

• jslix.addImage(0) // Grabs jslix.getImg(0) and saves it as a new image

• ctx.drawImage(jslix.getImg(1), 10, 10);