hp: 2/5
mp: 0/7

design

---

ready to get back into design?

what does it take to design a cultural center?
a senior housing facilitiy?
a artist in residence?

tech

---

to get back into tech?

game design? 2 canvas game in the website (specifically for moving around

- - - - code for adding a canvas and an object into the canvas

need to analyze this: 

canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}

onload="startGame()">

var myGamePiece;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 10, 120);
}

function component(width, height, color, x, y) {
    this.width target="_blank">this.width = width;
    this.height target="_blank">this.height = height;
    this.x = x;
    this.y = y;
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y,   this.width, this.height);
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context =     this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}

---

links:

part of one - testing ground site for my web code

goog - importing javascript into my website
goog - top down 2d game html
w3 - canvas intro
w3 - cs animations
w3 - images sprites hover effect
w3 - cs image sprites
w3 - sprite sheets in html
w3 - game movement
w3 - canvas images
w3 - game images
w3 - game components
w3 - css animation property
w3 - html canvas reference
w3 - canvas api
w3 - canvas drawing
w3 editor - the stroke method
codepen - html, js, css 2d game camera
mozilla - css animations

tutorialspoint - assigning a function to a var
w3 - svg images
pixelartcss - pixel art to css
mozilla - pixel art look with image-rendering
speckyboy - creating pixelated backgrounds
speckyboy - hand drawn elements
speckyboy - interactive web elements
goog - js interactable objects
stackoverflow - render three.js scene in canvas stackoverflow - can you use getContext(”3d”)
paulbourke - beginners guide to bitmaps
goog - what is a bitmap
goog - what is getContext in javascript
goog - what are html objects

goog - what is a package manager
goog - what is codepen
goog - what is a build system
goog - what is a child node in js

w3 - html querySelector()