Section 06, The Canvas and Drawing Graphics.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "6f2f5fc5",
   "metadata": {},
   "source": [
    "#### Execute this cell before running any code in this file..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5ec96dbb",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import Javascript Libraries: Execute this cell...\n",
    "from IPython.display import Javascript\n",
    "\n",
    "display(Javascript(\"jupyter_lib.js\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d5b6fb4f",
   "metadata": {},
   "source": [
    "# Section 6: The Canvas and Drawing Graphics\n",
    "\n",
    "Goals:\n",
    " - Learn how graphics are rendered to the screen in the browser.\n",
    " - Learn how to draw:\n",
    "   - Shapes\n",
    "   - Text\n",
    "   - Images\n",
    "\n",
    "## The Canvas\n",
    "\n",
    "In order to draw graphics, modern browsers that support HTML5 provide the Canvas API and element. Lets create one to see how it works."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fe2cf7bc",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "// Make a new canvas HTML element...\n",
    "let canvas = document.createElement(\"canvas\");\n",
    "// Set the width, height, and some other properties...\n",
    "canvas.width = 100;\n",
    "canvas.height = 100;\n",
    "canvas.innerHTML = \"Your browser does not support canvas!\";\n",
    "\n",
    "// Append a canvas html element to the webpage DOM (element actually refers to html div below this cell).\n",
    "element.append(canvas);\n",
    "\n",
    "// Return a graphics context so we can draw to the canvas. We just want 2D rendering, no 3D stuff going on here.\n",
    "// Note you can think of this as a painter, as it has all the methods that allow us to draw.\n",
    "let painter = canvas.getContext(\"2d\");\n",
    "\n",
    "// Now we will draw a rectangle... \n",
    "painter.fillStyle = \"yellow\"; // Make it yellow.\n",
    "// Fill the entire canvas...\n",
    "painter.fillRect(0, 0, 100, 100); // x, y, width, height\n",
    "\n",
    "// Now we will draw another rectangle... \n",
    "painter.fillStyle = \"red\"; // Make it red.\n",
    "// Starts at (5, 5) with width and height of 45.\n",
    "painter.fillRect(5, 5, 45, 45);\n",
    "\n",
    "// Another rectangle...\n",
    "painter.fillStyle = \"blue\";\n",
    "// Starts at (50, 50) with width and height of 45.\n",
    "painter.fillRect(50, 50, 45, 45);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cc89497e",
   "metadata": {},
   "source": [
    "You may notice that all HTML visual elements are just represented as objects in Javascript. We can manipulate them via there properties. This is called the Document Object Model (DOM). Code above begins by making an HTML canvas element and inserting it into element, which is actually another HTML element on the page (the one right below the code cell). Once added to the webpage, the code grabs a 2D Rendering Context, which we can view as a \"painter\". The painter can paint all kinds of shapes, text, and images to the canvas. In the above, we paint some rectangles. \n",
    "\n",
    "Some other notes: \n",
    " - The red and blue rectangles might not be where you expect them to be. This is because the origin, or (0, 0), of the canvas is the top left corner. This is standard for computer display coordinates.\n",
    " \n",
    "![Depiction of the canvas coordinate system. (0, 0) is in the top right.](images/canvas_coordinate_system.svg)\n",
    "\n",
    " - Just like a painter in real life, there is no way to \"erase\" drawings from the canvas. They way this is done is to paint over the entire picture with a background or white rectangle, covering everything.\n",
    "\n",
    "![Bob Ross Picture](images/painter_example.jpg)\n",
    "<p style='text-align: center;'><em>Making some happy little rectangles...</em></p>\n",
    "\n",
    " - The canvas API has many methods for drawing various objects. Documentation of all of them can be found [here](https://www.w3schools.com/graphics/canvas_reference.asp). I'm not expecting you to memorize them all, I can't even do that.\n",
    " \n",
    "As you may have noticed, the above code has a ton of boilerplate just to add a canvas and draw to it. Therefore, I've added an API method to automatically generate a canvas and context that stretches to fill the entire space, and is center aligned. We'll be using this for the game."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "749f21e3",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// This is an unpacking assignment.\n",
    "let [canvas, painter] = element.getCanvasAndPainter(500, 400, true, true);\n",
    "\n",
    "// Get to drawing much quicker!\n",
    "painter.fillStyle = \"blue\";\n",
    "painter.fillRect(0, 0, canvas.width, canvas.height);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "598593b9",
   "metadata": {},
   "source": [
    "### Drawing a Few Other Things\n",
    "\n",
    "Let's draw some other objects....\n",
    "\n",
    "#### Drawing Text (`fillText`)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1a1040bf",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// This is an unpacking assignment.\n",
    "let [canvas, painter] = element.getCanvasAndPainter(1000, 200);\n",
    "\n",
    "// Draw some text....\n",
    "painter.fillStyle = \"black\"; // Fill color is black.\n",
    "painter.font = \"50px Arial\"; // Set font size and face.\n",
    "\n",
    "// Display text. Oddly, x, y is the bottom left instead of the top left.\n",
    "painter.fillText(\"Hello World!\", 0, 50); \n",
    "\n",
    "// Just to show origin point.\n",
    "painter.fillStyle = \"red\";\n",
    "painter.fillRect(0, 50, 5, 5);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3ffca30c",
   "metadata": {},
   "source": [
    "#### Drawing Images (`drawImage`)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "aa99e5f8",
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// async allows us to wait on methods to finish using await...\n",
    "// Also causes function to be run on seperate thread...\n",
    "async function run(imagePath, element) {\n",
    "    // We wait for the image to be fully loaded...\n",
    "    let img = await loadImage(imagePath);\n",
    "    console.log(img)\n",
    "    \n",
    "    // The 'false' disables streching...\n",
    "    let [canvas, painter] = element.getCanvasAndPainter(img.width, img.height, false);\n",
    "    \n",
    "    painter.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height); // Draw the image at it's default size at 0, 0. \n",
    "    \n",
    "    painter.fillStyle = \"white\";\n",
    "    \n",
    "    painter.font = \"30px Arial\";\n",
    "    painter.fillText(\"Happy little trees.\", 0, img.height - 10);\n",
    "}\n",
    "\n",
    "run(\"images/painter_example.jpg\", element);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "005309e4",
   "metadata": {},
   "source": [
    "___Challenge Exercise: Using canvas methods above, draw a purple rectangle in the center of a 100x100 canvas, that is half the width and height of the canvas.___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d00a6bef",
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "// Put your code here!\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}