Skip to content

Instantly share code, notes, and snippets.

@tkojitu

tkojitu/html.html

Last active August 29, 2015 13:56
Show Gist options
  • Save tkojitu/8817153 to your computer and use it in GitHub Desktop.
Save tkojitu/8817153 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html.html
<html>
<head>
<script type="text/javascript" language="JavaScript" src="js.js"></script>
</head>
<body onload="onLoad();">
<canvas id="canvas" style="border:1px solid #000000;"></canvas>
</body>
</html>
Raw
js.js
var gRect = {
x: 0
,y: 0
,width: 200
,height: 100
,saved: {
x: 0
,y: 0
,width: 0
,height: 0
}
,contains: function(event) {
return this.x <= event.clientX &&
event.clientX <= this.x + this.width &&
this.y <= event.clientY &&
event.clientY <= this.y + this.height;
}
,save: function() {
this.saved = {
x: this.x
,y: this.y
,width: this.width
,height: this.height
};
}
,move: function(canvas, diffx, diffy) {
var newx = this.saved.x + diffx;
var newy = this.saved.y + diffy;
if (newx < 0) {
newx = 0;
} else if (newx + this.width > canvas.width) {
newx = canvas.width - this.width;
}
if (newy < 0) {
newy = 0;
} else if (newy + this.height > canvas.height) {
newy = canvas.height - this.height;
}
this.x = newx;
this.y = newy;
}
};
var gEventPosition;
var gColor;
function onLoad() {
var canvas = document.getElementById("canvas");
setupCanvas(canvas);
drawCanvas(canvas);
}
function setupCanvas(canvas) {
setCanvasSize(canvas);
addCanvasListeners(canvas);
}
function setCanvasSize(canvas) {
canvas.width = document.body.clientWidth / 2;
canvas.height = document.body.clientHeight / 2;
}
function addCanvasListeners(canvas) {
addMouseListeners(canvas);
addTouchListeners(canvas);
}
function addMouseListeners(canvas) {
canvas.addEventListener("mousedown", onMouseDown, false);
canvas.addEventListener("mousemove", onMouseMove, false);
canvas.addEventListener("mouseup", onMouseUp, false);
}
function onMouseDown(event) {
doDown(event);
event.preventDefault();
}
function doDown(event) {
if (gRect.contains(event)) {
gColor = "rgb(200, 0, 0)";
gRect.save();
gEventPosition = {
x: event.clientX,
y: event.clientY
};
} else {
gEventPosition = null;
}
}
function onMouseMove(event) {
doMove(event);
event.preventDefault();
}
function doMove(event) {
if (gEventPosition === null) {
return;
}
var canvas = document.getElementById("canvas");
gRect.move(canvas, event.clientX - gEventPosition.x,
event.clientY - gEventPosition.y);
drawCanvas(document.getElementById("canvas"));
}
function onMouseUp(event) {
doUp(event);
event.preventEvent();
}
function doUp(event) {
gColor = "rgb(0, 200, 0)";
gEventPosition = null;
drawCanvas(document.getElementById("canvas"));
}
function addTouchListeners(canvas) {
canvas.addEventListener("touchstart", onTouchStart, false);
canvas.addEventListener("touchmove", onTouchMove, false);
canvas.addEventListener("touchend", onTouchEnd, false);
}
function onTouchStart(event) {
doDown(event.changedTouches[0]);
event.preventDefault();
}
function onTouchMove(event) {
doMove(event.changedTouches[0]);
event.preventDefault();
}
function onTouchEnd(event) {
doUp(event.changedTouches[0]);
event.preventDefault();
}
function drawCanvas(canvas) {
var context = canvas.getContext("2d");
clearCanvas(canvas, context);
drawRect(context);
}
function clearCanvas(canvas, context) {
context.clearRect(0, 0, canvas.width, canvas.height);
}
function drawRect(context) {
context.fillStyle = gColor;
context.fillRect(gRect.x, gRect.y, gRect.width, gRect.height);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment