Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
refactoring-demo for SaCSS vol.29
<!DOCTYPE html>
<style type="text/css">
body {
width: 100%;
height: 100%;
background-color: #666;
canvas {
width: 600px;
height: 400px;
<canvas id="canvas"></canvas>
<script src="rect.js"></script>
<script src="main.js"></script>
(function(window) {
var canvas = document.getElementById('canvas');
(function(global) {
global.fillRect = function (canvas) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(2, 2, 50, 30);
})(typeof window == 'undefined' ? module.exports : window);
var fillRect = require('./rect').fillRect;
var Canvas = require('term-canvas');
var canvas = new Canvas(50, 50);

This comment has been minimized.

Copy link
Owner Author

commented Nov 29, 2011

SaCSS vol.29 で行ったライブコーディングの資料です。

リファクタリング進めながら、クライアントサイドで動かしていた Canvas を
Node を使ってターミナル上でも動かせるようにしていきました。




$ open index.html

Node.js で動作させる場合:

$ node term.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.