Category : HTML5 Canvas
HTML5 Canvas Drag and Drop Multiple Images with KineticJS
<script src="kinetic-v1.0.1.js">
</script>
<script>
var canvas = null;
var context = null;
var images = {};
// initialize an array of rectangles that provide
// rectangular paths and properties for the images
var rectangles = [{
name: "darthVader",
image: null,
x: 100,
y: 40,
width: 200,
height: 137,
dragging: false,
offsetX: 0,
offsetY: 0,
}, {
name: "yoda",
image: null,
x: 350,
y: 55,
width: 93,
height: 104,
dragging: false,
offsetX: 0,
offsetY: 0,
}];
function loadImages(sources, callback){
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages) {
callback();
}
};
images[src].src = sources[src];
}
}
function initStage(){
// map images to rectangles array
counter = 0;
for (var img in images) {
rectangles[counter++]["image"] = images[img];
}
// when using KineticJS, we need to draw the shapes with the highest z-index
// first and the shapes with the lowest z-index last in order to
// correctly handle shape layering
context.globalCompositeOperation = "destination-over";
myStage = new Kinetic.Stage(canvas);
myStage.setDrawStage(function(){
var mousePos = myStage.getMousePos();
for (var n = 0; n < rectangles.length; n++) {
var thisRect = rectangles[n];
if (thisRect.dragging) {
thisRect.x = mousePos.x - thisRect.offsetX;
thisRect.y = mousePos.y - thisRect.offsetY;
}
myStage.beginRegion();
context.drawImage(thisRect.image, thisRect.x, thisRect.y, thisRect.width, thisRect.height);
context.beginPath();
context.rect(thisRect.x, thisRect.y, thisRect.width, thisRect.height);
context.closePath();
myStage.addRegionEventListener("onmousedown", function(){
thisRect.dragging = true;
var mousePos = myStage.getMousePos();
thisRect.offsetX = mousePos.x - thisRect.x;
thisRect.offsetY = mousePos.y - thisRect.y;
// place this rect at the beginning of the rectangles
// array so that is is rendered on top
rectangles.splice(n, 1);
rectangles.splice(0, 0, thisRect);
});
myStage.addRegionEventListener("onmouseup", function(){
thisRect.dragging = false;
});
myStage.addRegionEventListener("onmouseover", function(){
document.body.style.cursor = "pointer";
});
myStage.addRegionEventListener("onmouseout", function(){
document.body.style.cursor = "default";
});
myStage.closeRegion();
}
context.font = "18pt Calibri";
context.fillStyle = "black";
context.fillText("Drag and drop the images...", 10, 25);
});
}
window.onload = function(){
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
var sources = {
darthVader: "darth-vader.jpg",
yoda: "yoda.jpg"
};
loadImages(sources, function(){
initStage();
});
}
</script>
By Eric Rowell at html5canvastutorials.com
HTML5 Canvas Image Loader
When HTML5 Canvas applications require multiple images, it’s usually a good idea to load all of the images before drawing on the canvas. To simplify the loading process, it’s convenient to use an image loader function that takes in an object of image sources, creates an object of images, and then calls a user defined function whenever all of the images have loaded.
HTML5 Canvas Image Loader Example
var images = {};
function loadImages(sources, callback){
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages) {
callback();
}
};
images[src].src = sources[src];
}
}
By Eric Rowell at html5canvastutorials.com
HTML5 Canvas Drag and Drop Multiple Shapes using KineticJS
<script src="kinetic-v1.0.1.js">
</script>
<script>
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
// initialize shapes
var rectangles = [];
for (var n = 0; n < 6; n++) {
rectangles.push({
x: n * 30 + 150,
y: n * 18 + 40,
width: 100,
height: 50,
color: colors[n],
dragging: false,
offsetX: 0,
offsetY: 0,
});
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// when using KineticJS, we need to draw the shapes with the highest z-index
// first and the shapes with the lowest z-index last in order to
// correctly handle shape layering
context.globalCompositeOperation = "destination-over";
myStage = new Kinetic.Stage(canvas);
myStage.setDrawStage(function(){
var mousePos = myStage.getMousePos();
for (var n = 0; n < rectangles.length; n++) {
// anonymouse function to induce scope
(function(){
var thisRect = rectangles[n];
if (thisRect.dragging) {
thisRect.x = mousePos.x - thisRect.offsetX;
thisRect.y = mousePos.y - thisRect.offsetY;
}
myStage.beginRegion();
context.beginPath();
context.rect(thisRect.x, thisRect.y, thisRect.width, thisRect.height);
context.lineWidth = 4;
context.strokeStyle = "black";
context.fillStyle = thisRect.color;
context.fill();
context.stroke();
context.closePath();
myStage.addRegionEventListener("onmousedown", function(){
thisRect.dragging = true;
var mousePos = myStage.getMousePos();
thisRect.offsetX = mousePos.x - thisRect.x;
thisRect.offsetY = mousePos.y - thisRect.y;
// place this rect at the beginning of the rectangles
// array so that is is rendered on top
rectangles.splice(n, 1);
rectangles.splice(0, 0, thisRect);
});
myStage.addRegionEventListener("onmouseup", function(){
thisRect.dragging = false;
});
myStage.addRegionEventListener("onmouseover", function(){
document.body.style.cursor = "pointer";
});
myStage.addRegionEventListener("onmouseout", function(){
document.body.style.cursor = "default";
});
myStage.closeRegion();
})();
}
context.font = "18pt Calibri";
context.fillStyle = "black";
context.fillText("Drag and drop the rectangles...", 10, 25);
});
}
</script>
By Eric Rowell at html5canvastutorials.com
HTML5 Canvas Rotating Plane
<script src="kinetic-v1.0.0.js">
</script>
<script>
window.onload = function(){
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
var planeWidth = 200;
var planeHeight = 100;
var planeTheta = 0;
var planeTilt = 1; // ranges between -1 and 1
var myStage = new Kinetic.Stage(canvas, 100);
// define updateStage method
myStage.setUpdateStage(function(){
planeTheta += 0.02;
planeTilt = Math.sin(planeTheta / 2);
});
// define drawStage method
myStage.setDrawStage(function(){
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(1, planeTilt);
context.rotate(planeTheta);
var planeColor = null;
planeColor = (planeTilt >= 0) ? "red" : "blue";
context.fillStyle = planeColor;
context.fillRect(-planeWidth / 2, -planeHeight / 2, planeWidth, planeHeight);
context.restore();
});
// start animation
myStage.start();
};
</script>
By Eric Rowell at html5canvastutorials.com
HTML5 Canvas Pixelated Image Focus
var pixelation = 40;
function focusImage(context, imageObj, sourceWidth, sourceHeight, destX, destY){
var sourceX = destX;
var sourceY = destY;
var imageData = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
var data = imageData.data;
for (var y = 0; y < sourceHeight; y += pixelation) {
for (var x = 0; x < sourceWidth; x += pixelation) {
var red = data[((sourceWidth * y) + x) * 4];
var green = data[((sourceWidth * y) + x) * 4 + 1];
var blue = data[((sourceWidth * y) + x) * 4 + 2];
for (var n = 0; n < pixelation; n++) {
for (var m = 0; m < pixelation; m++) {
if (x + m < sourceWidth) {
data[((sourceWidth * (y + n)) + (x + m)) * 4] = red;
data[((sourceWidth * (y + n)) + (x + m)) * 4 + 1] = green;
data[((sourceWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
}
}
}
}
}
// overwrite original image
context.putImageData(imageData, destX, destY);
pixelation -= 1;
}
window.onload = function(){
var fps = 20; // frames / second
var timeInterval = 1000 / fps; // milliseconds
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
var sourceWidth = imageObj.width;
var sourceHeight = imageObj.height;
var destX = canvas.width / 2 - sourceWidth / 2;
var destY = canvas.height / 2 - sourceHeight / 2;
var intervalId = setInterval(function(){
context.drawImage(imageObj, destX, destY);
if (pixelation < 1) {
clearInterval(intervalId);
}
else {
focusImage(context, imageObj, sourceWidth, sourceHeight, destX, destY);
}
}, timeInterval);
};
imageObj.src = "darth-vader.jpg";
};
By Eric Rowell at html5canvastutorials.com
Recent Posts