diff --git a/README.md b/README.md
index ad47c42..49776a6 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
-# fa-strip-tutorial
+# HTML5 Canvass Tutorial
-From https://www.furaffinity.net/gallery/blueballs/folder/408099/HTML5-Canvas-Tutorial
\ No newline at end of file
+This is taken directly from Blueball's [HTML5 Canvass Tutorial](https://www.furaffinity.net/gallery/blueballs/folder/408099/HTML5-Canvas-Tutorial) on FA for reference. The ``/public`` directly is used for local static server hosting.
diff --git a/public/belly.png b/public/belly.png
new file mode 100644
index 0000000..6a38a8c
Binary files /dev/null and b/public/belly.png differ
diff --git a/public/blink.png b/public/blink.png
new file mode 100644
index 0000000..ac225e0
Binary files /dev/null and b/public/blink.png differ
diff --git a/public/head.png b/public/head.png
new file mode 100644
index 0000000..2d10b7c
Binary files /dev/null and b/public/head.png differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..f4cd6c7
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,13 @@
+
+
+
+Tutorial Game
+
+
+
+
+Loading...
+
+
+
+
diff --git a/public/pants.png b/public/pants.png
new file mode 100644
index 0000000..d6fb33c
Binary files /dev/null and b/public/pants.png differ
diff --git a/public/penis.png b/public/penis.png
new file mode 100644
index 0000000..29210f1
Binary files /dev/null and b/public/penis.png differ
diff --git a/public/shirt.png b/public/shirt.png
new file mode 100644
index 0000000..d3301e2
Binary files /dev/null and b/public/shirt.png differ
diff --git a/public/tutorial.js b/public/tutorial.js
new file mode 100644
index 0000000..d9e035c
--- /dev/null
+++ b/public/tutorial.js
@@ -0,0 +1,179 @@
+window.onload = function() {
+ // Get the canvas and context
+ var canvas = document.getElementById("viewport");
+ var context = canvas.getContext("2d");
+
+ context.canvas.width = 856;
+ context.canvas.height = 1193;
+
+ var images = ["wolfnaked.png", "belly.png", "head.png", "penis.png", "undies.png", "shirt.png", "pants.png", "blink.png"];
+ var loadedimages = [];
+
+ var wearing_shirt = true;
+ var wearing_jeans = true;
+ var wearing_underwear = true;
+ var blinktimer = 0;
+ var breathtimer = 0;
+ var speechtimer = 0;
+ var quote = "";
+
+ buttons = [{ //Shirt
+ x: 300,
+ y: 200,
+ width: 250,
+ height: 350
+ }, { //Pants
+ x: 270,
+ y: 600,
+ width: 400,
+ height: 450
+ }, { //Underwear
+ x: 300,
+ y: 520,
+ width: 300,
+ height: 200
+ }];
+
+ function loadImages(imageindex) {
+ if (imageindex < images.length) {
+ var newimage = new Image();
+ newimage.onload = function() {
+ loadedimages.push(newimage);
+ imageindex++;
+ loadImages(imageindex);
+ }
+ newimage.src = images[imageindex];
+ } else {
+ init();
+ }
+ };
+
+ function init() {
+ document.getElementById("load").style.display = "none";
+ canvas.addEventListener("mousedown", onMouseDown);
+ doTheRest();
+ };
+
+ function calculatebellyrise() {
+ return Math.sin(breathtimer / 50);
+ };
+
+ function drawBubble() {
+ context.font = "20pt Verdana";
+
+ var x = 300;
+ var y = 350;
+ var w = context.measureText(quote).width + 10;
+ var h = parseInt(context.font) + 10;
+ var radius = 10;
+ if (speechtimer) {
+ var r = x + w;
+ var b = y + h;
+ context.beginPath();
+ context.strokeStyle = "black";
+ context.lineWidth = "2";
+ context.moveTo(x + radius, y);
+ context.lineTo(x + radius / 2, y - 10);
+ context.lineTo(x + radius * 2, y);
+ context.lineTo(r - radius, y);
+ context.quadraticCurveTo(r, y, r, y + radius);
+ context.lineTo(r, y + h - radius);
+ context.quadraticCurveTo(r, b, r - radius, b);
+ context.lineTo(x + radius, b);
+ context.quadraticCurveTo(x, b, x, b - radius);
+ context.lineTo(x, y + radius);
+ context.quadraticCurveTo(x, y, x + radius, y);
+ context.fillStyle = "#ffffff";
+ context.fill();
+ context.stroke();
+
+ context.fillStyle = "black";
+ context.fillText(quote, x + 5, y + h - 5);
+ }
+ };
+
+ function doTheRest() {
+ window.requestAnimationFrame(doTheRest);
+
+ breathtimer++;
+ blinktimer++;
+ if (blinktimer > 200) {
+ blinktimer = 0;
+ }
+
+ speechtimer--;
+ if (speechtimer < 0) {
+ speechtimer = 0;
+ }
+
+ context.globalAlpha = 1;
+ context.fillStyle = "lightblue";
+ context.fillRect(0, 0, canvas.width, canvas.height);
+ context.drawImage(loadedimages[0], 0, 0, canvas.width, canvas.height);
+
+ var amount_to_raise = calculatebellyrise() * 2;
+ context.drawImage(loadedimages[1], 0, 0 + amount_to_raise, canvas.width, canvas.height);
+ if (blinktimer > 190) {
+ context.drawImage(loadedimages[7], 0, 0, canvas.width, canvas.height);
+ } else {
+ context.drawImage(loadedimages[2], 0, 0, canvas.width, canvas.height);
+ }
+
+
+ if (!wearing_underwear && !wearing_jeans) {
+ context.drawImage(loadedimages[3], 0, 0, canvas.width, canvas.height);
+ }
+ if (wearing_underwear && !wearing_jeans) {
+ context.drawImage(loadedimages[4], 0, 0, canvas.width, canvas.height);
+ }
+ if (wearing_shirt) {
+ context.drawImage(loadedimages[5], 0, 0 + amount_to_raise, canvas.width, canvas.height);
+ }
+ if (wearing_jeans) {
+ context.drawImage(loadedimages[6], 0, 0, canvas.width, canvas.height);
+ }
+
+ drawBubble();
+
+ // context.fillStyle = "black";
+ // context.globalAlpha = 0.8;
+ // for (var i = 0; i < buttons.length; i++) {
+ // context.fillRect(buttons[i].x, buttons[i].y, buttons[i].width, buttons[i].height);
+ // }
+ };
+
+ function getMousePos(canvas, e) {
+ var rect = canvas.getBoundingClientRect();
+ return {
+ x: Math.round((e.clientX - rect.left) / (rect.right - rect.left) * canvas.width),
+ y: Math.round((e.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height)
+ };
+ }
+
+ function onMouseDown(e) {
+ var pos = getMousePos(canvas, e);
+ for (var i = 0; i < buttons.length; i++) {
+ if (pos.x >= buttons[i].x && pos.x < buttons[i].x + buttons[i].width &&
+ pos.y >= buttons[i].y && pos.y < buttons[i].y + buttons[i].height) {
+
+ if (i == 0) { //Shirt
+ wearing_shirt = false;
+ quote = "I have very soft chest fur!";
+ speechtimer = 50;
+ break;
+ }
+ if (i == 1 && wearing_jeans) { //Pants
+ wearing_jeans = false;
+ break;
+ }
+ if (i == 2 && !wearing_jeans) { //Underwear - but only if the pants are off
+ wearing_underwear = false;
+ break;
+ }
+
+ }
+ }
+ };
+
+ loadImages(0);
+};
diff --git a/public/undies.png b/public/undies.png
new file mode 100644
index 0000000..9481913
Binary files /dev/null and b/public/undies.png differ
diff --git a/public/wolfnaked.png b/public/wolfnaked.png
new file mode 100644
index 0000000..e774a2a
Binary files /dev/null and b/public/wolfnaked.png differ
diff --git a/public/wolfnaked1.png b/public/wolfnaked1.png
new file mode 100644
index 0000000..fa5ba54
Binary files /dev/null and b/public/wolfnaked1.png differ