1
0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00

Implemented eraser tool. Must move and resize layers at the same time.

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
This commit is contained in:
npalomba 2019-03-31 16:32:49 +02:00
parent 42a8ce3c4a
commit a9d380ec1d
17 changed files with 83 additions and 71 deletions

View File

@ -21,9 +21,9 @@ Suggestions / Planned features:
- Selections - Selections
- New selection tool - New selection tool
- New canvas layer above the drawing layer - New currentLayer.canvas layer above the drawing layer
- Move when click and drag - Move when click and drag
- Merge with canvas when click outside - Merge with currentLayer.canvas when click outside
- Copy/paste - Copy/paste
- Add as selection - Add as selection
@ -35,7 +35,7 @@ Suggestions / Planned features:
- Palette option remove unused colors - Palette option remove unused colors
- Pixel Grid - Pixel Grid
- Another canvas - Another currentLayer.canvas
- Must be rescaled each zoom - Must be rescaled each zoom
- Possibly add collaborate function using together.js - Possibly add collaborate function using together.js

View File

@ -54,11 +54,11 @@ canvas {
} }
#checkerboard { #checkerboard {
z-index:1000; z-index:1;
} }
#pixel-canvas { #pixel-canvas {
z-index:1; z-index:2;
background:transparent; background:transparent;
} }

View File

@ -1,6 +1,7 @@
function Canvas(width, height, canvas) { function Canvas(width, height, canvas) {
this.canvasSize = [width, height], this.canvasSize = [width, height],
this.canvas = canvas, this.canvas = canvas,
this.context = canvas.getContext("2d"),
this.initialize = function() { this.initialize = function() {
var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75); var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75); var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);

View File

@ -6,6 +6,8 @@ var nSquaresFilled = 0;
*/ */
function fillCheckerboard() { function fillCheckerboard() {
var context = checkerBoard.context;
for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) { for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {
nSquaresFilled = 0; nSquaresFilled = 0;

View File

@ -9,7 +9,7 @@ function clickedColor (e){
if (selectedColor) selectedColor.classList.remove("selected"); if (selectedColor) selectedColor.classList.remove("selected");
//set current color //set current color
context.fillStyle = this.style.backgroundColor; currentLayer.context.fillStyle = this.style.backgroundColor;
//make color selected //make color selected
e.target.parentElement.classList.add('selected'); e.target.parentElement.classList.add('selected');

View File

@ -36,10 +36,10 @@ function createColorPalette(selectedPalette, fillBackground) {
//fill bg with lightest color //fill bg with lightest color
if (fillBackground) { if (fillBackground) {
context.fillStyle = lightestColor; currentLayer.context.fillStyle = lightestColor;
context.fillRect(0, 0, canvasSize[0], canvasSize[1]); currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
} }
//set as current color //set as current color
context.fillStyle = darkestColor; currentLayer.context.fillStyle = darkestColor;
} }

View File

@ -73,7 +73,7 @@ function deleteColor (color) {
//set current color TO LIGHTEST COLOR //set current color TO LIGHTEST COLOR
lightestColor[1].parentElement.classList.add('selected'); lightestColor[1].parentElement.classList.add('selected');
context.fillStyle = '#'+lightestColor[1].jscolor.toString(); currentLayer.context.fillStyle = '#'+lightestColor[1].jscolor.toString();
} }
//delete the element //delete the element

View File

@ -10,9 +10,9 @@ function line(x0,y0,x1,y1) {
while (true) { while (true) {
//set pixel //set pixel
if (currentTool == 'pencil') { if (currentTool == 'pencil') {
context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize); currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} else if (currentTool == 'eraser') { } else if (currentTool == 'eraser') {
context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize); currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), eraserSize, eraserSize);
} }
//if we've reached the end goal, exit the loop //if we've reached the end goal, exit the loop

View File

@ -5,19 +5,19 @@ const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
//prototype for undoing canvas changes //prototype for undoing canvas changes
function HistoryStateEditCanvas () { function HistoryStateEditCanvas () {
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.undo = function () { this.undo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0); currentLayer.context.putImageData(this.canvas, 0, 0);
this.canvas = currentCanvas; this.canvas = currentCanvas;
redoStates.push(this); redoStates.push(this);
} }
this.redo = function () { this.redo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0); currentLayer.context.putImageData(this.canvas, 0, 0);
this.canvas = currentCanvas; this.canvas = currentCanvas;
undoStates.push(this); undoStates.push(this);
@ -48,11 +48,11 @@ function HistoryStateAddColor (colorValue) {
//prototype for undoing deleted colors //prototype for undoing deleted colors
function HistoryStateDeleteColor (colorValue) { function HistoryStateDeleteColor (colorValue) {
this.colorValue = colorValue; this.colorValue = colorValue;
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.undo = function () { this.undo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0); currentLayer.context.putImageData(this.canvas, 0, 0);
addColor(this.colorValue); addColor(this.colorValue);
@ -61,8 +61,8 @@ function HistoryStateDeleteColor (colorValue) {
} }
this.redo = function () { this.redo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0); currentLayer.context.putImageData(this.canvas, 0, 0);
deleteColor(this.colorValue); deleteColor(this.colorValue);
@ -78,11 +78,11 @@ function HistoryStateDeleteColor (colorValue) {
function HistoryStateEditColor (newColorValue, oldColorValue) { function HistoryStateEditColor (newColorValue, oldColorValue) {
this.newColorValue = newColorValue; this.newColorValue = newColorValue;
this.oldColorValue = oldColorValue; this.oldColorValue = oldColorValue;
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.undo = function () { this.undo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0); currentLayer.context.putImageData(this.canvas, 0, 0);
//find new color in palette and change it back to old color //find new color in palette and change it back to old color
var colors = document.getElementsByClassName('color-button'); var colors = document.getElementsByClassName('color-button');
@ -99,8 +99,8 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
} }
this.redo = function () { this.redo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0); currentLayer.context.putImageData(this.canvas, 0, 0);
//find old color in palette and change it back to new color //find old color in palette and change it back to new color
var colors = document.getElementsByClassName('color-button'); var colors = document.getElementsByClassName('color-button');

View File

@ -547,7 +547,7 @@ var jsc = {
//console.log(e.target,'=====================================') //console.log(e.target,'=====================================')
//if they clicked on the delete button [lospec] //if they clicked on the delete button [lospec]
if (e.target.className == 'delete-color-button') { if (e.target.className == 'delete-color-button') {
//saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])}); //saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
new HistoryStateDeleteColor(jsc.picker.owner.toString()); new HistoryStateDeleteColor(jsc.picker.owner.toString());
deleteColor(jsc.picker.owner.styleElement); deleteColor(jsc.picker.owner.styleElement);
@ -784,15 +784,15 @@ var jsc = {
// Canvas implementation for modern browsers // Canvas implementation for modern browsers
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d'); var ctx = currentLayer.canvas.getContext('2d');
var drawFunc = function (width, height, type) { var drawFunc = function (width, height, type) {
canvas.width = width; currentLayer.canvas.width = width;
canvas.height = height; currentLayer.canvas.height = height;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0); var hGrad = ctx.createLinearGradient(0, 0, currentLayer.canvas.width, 0);
hGrad.addColorStop(0 / 6, '#F00'); hGrad.addColorStop(0 / 6, '#F00');
hGrad.addColorStop(1 / 6, '#FF0'); hGrad.addColorStop(1 / 6, '#FF0');
hGrad.addColorStop(2 / 6, '#0F0'); hGrad.addColorStop(2 / 6, '#0F0');
@ -802,9 +802,9 @@ var jsc = {
hGrad.addColorStop(6 / 6, '#F00'); hGrad.addColorStop(6 / 6, '#F00');
ctx.fillStyle = hGrad; ctx.fillStyle = hGrad;
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height); var vGrad = ctx.createLinearGradient(0, 0, 0, currentLayer.canvas.height);
switch (type.toLowerCase()) { switch (type.toLowerCase()) {
case 's': case 's':
vGrad.addColorStop(0, 'rgba(255,255,255,0)'); vGrad.addColorStop(0, 'rgba(255,255,255,0)');
@ -816,7 +816,7 @@ var jsc = {
break; break;
} }
ctx.fillStyle = vGrad; ctx.fillStyle = vGrad;
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, currentLayer.canvas.width, canvas.height);
}; };
paletteObj.elm = canvas; paletteObj.elm = canvas;

View File

@ -15,10 +15,10 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
newPixel(this.width, this.height, []); newPixel(this.width, this.height, []);
//draw the image onto the canvas //draw the image onto the canvas
context.drawImage(img, 0, 0); currentLayer.context.drawImage(img, 0, 0);
var colorPalette = {}; var colorPalette = {};
var imagePixelData = context.getImageData(0,0,this.width, this.height).data; var imagePixelData = currentLayer.context.getImageData(0,0,this.width, this.height).data;
var imagePixelDataLength = imagePixelData.length; var imagePixelDataLength = imagePixelData.length;

View File

@ -17,7 +17,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
currentTool = 'pan'; currentTool = 'pan';
else if (mouseEvent.altKey) else if (mouseEvent.altKey)
currentTool = 'eyedropper'; currentTool = 'eyedropper';
else if (mouseEvent.target == canvas && (currentTool == 'pencil' || currentTool == 'eraser')) else if (mouseEvent.target == currentLayer.canvas && (currentTool == 'pencil' || currentTool == 'eraser'))
new HistoryStateEditCanvas(); new HistoryStateEditCanvas();
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])}); //saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
@ -31,7 +31,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
} }
// TODO add eraser resize for scroll wheel // TODO add eraser resize for scroll wheel
if (currentTool == 'eyedropper' && mouseEvent.target == canvas) if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas)
eyedropperPreview.style.display = 'block'; eyedropperPreview.style.display = 'block';
return false; return false;
@ -46,7 +46,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
if (!documentCreated || dialogueOpen) return; if (!documentCreated || dialogueOpen) return;
if (currentTool == 'eyedropper' && mouseEvent.target == canvas) { if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas) {
var cursorLocation = getCursorPosition(mouseEvent); var cursorLocation = getCursorPosition(mouseEvent);
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1); var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]); var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
@ -78,10 +78,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
} }
else if (currentTool == 'fill' && mouseEvent.target == canvas) { else if (currentTool == 'fill' && mouseEvent.target == currentLayer.canvas) {
console.log('filling') console.log('filling')
//if you clicked on anything but the canvas, do nothing //if you clicked on anything but the canvas, do nothing
if (!mouseEvent.target == canvas) return; if (!mouseEvent.target == currentLayer.canvas) return;
//get cursor postion //get cursor postion
var cursorLocation = getCursorPosition(mouseEvent); var cursorLocation = getCursorPosition(mouseEvent);
@ -93,7 +93,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
//fill starting at the location //fill starting at the location
fill(cursorLocation); fill(cursorLocation);
} }
else if (currentTool == 'zoom' && mouseEvent.target == canvas) { else if (currentTool == 'zoom' && mouseEvent.target == currentLayer.canvas) {
if (mouseEvent.which == 1) changeZoom('in', getCursorPosition(mouseEvent)); if (mouseEvent.which == 1) changeZoom('in', getCursorPosition(mouseEvent));
else if (mouseEvent.which == 3) changeZoom('out', getCursorPosition(mouseEvent)) else if (mouseEvent.which == 3) changeZoom('out', getCursorPosition(mouseEvent))
} }
@ -121,18 +121,18 @@ function draw (mouseEvent) {
if (currentTool == 'pencil') { if (currentTool == 'pencil') {
//move the brush preview //move the brush preview
brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px'; brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px'; brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
//hide brush preview outside of canvas / canvas view //hide brush preview outside of canvas / canvas view
if (mouseEvent.target == canvas || mouseEvent.target == canvasView) if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
brushPreview.style.visibility = 'visible'; brushPreview.style.visibility = 'visible';
else else
brushPreview.style.visibility = 'hidden'; brushPreview.style.visibility = 'hidden';
//draw line to current pixel //draw line to current pixel
if (dragging) { if (dragging) {
if (mouseEvent.target == canvas || mouseEvent.target == canvasView) { if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom)); line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
lastPos = cursorLocation; lastPos = cursorLocation;
} }
@ -153,14 +153,14 @@ function draw (mouseEvent) {
brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px'; brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
//hide brush preview outside of canvas / canvas view //hide brush preview outside of canvas / canvas view
if (mouseEvent.target == canvas || mouseEvent.target == canvasView) if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
brushPreview.style.visibility = 'visible'; brushPreview.style.visibility = 'visible';
else else
brushPreview.style.visibility = 'hidden'; brushPreview.style.visibility = 'hidden';
//draw line to current pixel //draw line to current pixel
if (dragging) { if (dragging) {
if (mouseEvent.target == canvas || mouseEvent.target == canvasView) { if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom)); line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
lastPos = cursorLocation; lastPos = cursorLocation;
} }
@ -169,30 +169,30 @@ function draw (mouseEvent) {
else if (currentTool == 'pan' && dragging) { else if (currentTool == 'pan' && dragging) {
setCanvasOffset(canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), canvas.offsetTop + (cursorLocation[1] - lastPos[1])) setCanvasOffset(currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
/* /*
if ( if (
//right //right
canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - canvasSize[0]*zoom*0.25 - 48 && currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - currentLayer.canvasSize[0]*zoom*0.25 - 48 &&
//left //left
canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64) currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64)
canvas.style.left = canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) +'px'; canvas.style.left = canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) +'px';
if ( if (
//bottom //bottom
canvas.offsetTop + (cursorLocation[1] - lastPos[1]) < window.innerHeight-canvasSize[1]*zoom*0.25 && canvas.offsetTop + (cursorLocation[1] - lastPos[1]) < window.innerHeight-canvasSize[1]*zoom*0.25 &&
//top //top
canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48) currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48)
canvas.style.top = canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px'; currentLayer.canvas.style.top = currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px';
*/ */
} }
else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == canvas) { else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == currentLayer.canvas) {
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data; var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]); eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]);
eyedropperPreview.style.display = 'block'; eyedropperPreview.style.display = 'block';
eyedropperPreview.style.left = cursorLocation[0] + canvas.offsetLeft - 30 + 'px'; eyedropperPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - 30 + 'px';
eyedropperPreview.style.top = cursorLocation[1] + canvas.offsetTop - 30 + 'px'; eyedropperPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - 30 + 'px';
var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]); var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]);
@ -213,8 +213,8 @@ function draw (mouseEvent) {
brushSize = Math.max(1,newBrushSize); brushSize = Math.max(1,newBrushSize);
//fix offset so the cursor stays centered //fix offset so the cursor stays centered
brushPreview.style.left = lastPos[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px'; brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = lastPos[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px'; brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
updateCursor(); updateCursor();
} }

View File

@ -1,9 +1,12 @@
function newPixel (width, height, palette) { function newPixel (width, height, palette) {
var main = new Canvas(width, height, canvas); currentLayer = new Canvas(width, height, canvas);
main.initialize(); currentLayer.initialize();
canvasSize = main.canvasSize; checkerBoard = new Canvas(width, height, checkerBoard);
checkerBoard.initialize();
canvasSize = currentLayer.canvasSize;
//remove current palette //remove current palette
colors = document.getElementsByClassName('color-button'); colors = document.getElementsByClassName('color-button');
while (colors.length > 0) { while (colors.length > 0) {
@ -40,14 +43,14 @@ function newPixel (width, height, palette) {
//fill background of canvas with bg color //fill background of canvas with bg color
fillCheckerboard(); fillCheckerboard();
/* /*
context.fillStyle = '#'+defaultBackgroundColor; currentLayer.context.fillStyle = '#'+defaultBackgroundColor;
context.fillRect(0, 0, canvasSize[0], canvasSize[1]); currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
console.log('#'+defaultBackgroundColor) console.log('#'+defaultBackgroundColor)
*/ */
//set current drawing color as foreground color //set current drawing color as foreground color
context.fillStyle = '#'+defaultForegroundColor; currentLayer.context.fillStyle = '#'+defaultForegroundColor;
selectedPalette = 'none'; selectedPalette = 'none';
} }

View File

@ -7,7 +7,7 @@ function replaceAllOfColor (oldColor, newColor) {
if (typeof newColor === 'string') newColor = hexToRgb(newColor); if (typeof newColor === 'string') newColor = hexToRgb(newColor);
//create temporary image from canvas to search through //create temporary image from canvas to search through
var tempImage = context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
//loop through all pixels //loop through all pixels
for (var i=0;i<tempImage.data.length;i+=4) { for (var i=0;i<tempImage.data.length;i+=4) {
@ -21,5 +21,5 @@ function replaceAllOfColor (oldColor, newColor) {
} }
//put temp image back onto canvas //put temp image back onto canvas
context.putImageData(tempImage,0,0); currentLayer.context.putImageData(tempImage,0,0);
} }

View File

@ -12,7 +12,7 @@ function updateCursor () {
brushPreview.style.display = 'block'; brushPreview.style.display = 'block';
brushPreview.style.width = eraserSize * zoom + 'px'; brushPreview.style.width = eraserSize * zoom + 'px';
brushPreview.style.height = eraserSize * zoom + 'px'; brushPreview.style.height = eraserSize * zoom + 'px';
context.fillStyle = 'rgba(255, 0, 0, 0)'; currentLayer.context.fillStyle = 'rgba(255, 0, 0, 0)';
} else } else
brushPreview.style.display = 'none'; brushPreview.style.display = 'none';

View File

@ -12,13 +12,12 @@ var prevEraserSize = 1;
var menuOpen = false; var menuOpen = false;
var dialogueOpen = false; var dialogueOpen = false;
var documentCreated = false; var documentCreated = false;
var layers =
// Checkerboard management // Checkerboard management
var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)'; var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)';
var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)'; var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
var checkerBoardSquareSize = 16; var checkerBoardSquareSize = 16;
//var checkerBoard = document.getElementById("checkerboard").getContext("2d"); var checkerBoard = document.getElementById("checkerboard");
//common elements //common elements
var brushPreview = document.getElementById("brush-preview"); var brushPreview = document.getElementById("brush-preview");
@ -32,3 +31,9 @@ var popUpContainer = document.getElementById("pop-up-container");
var canvas = document.getElementById("pixel-canvas"); var canvas = document.getElementById("pixel-canvas");
var context = canvas.getContext("2d"); var context = canvas.getContext("2d");
// Layers
var layers = [];
var currentLayer;
//TODO all layers must be moved and resized at the same time

View File

@ -99,6 +99,7 @@
<div id="canvas-view"> <div id="canvas-view">
<canvas id="pixel-canvas"></canvas> <canvas id="pixel-canvas"></canvas>
<canvas id="checkerboard"></canvas>
</div> </div>
<div id="canvas-view-shadow"></div> <div id="canvas-view-shadow"></div>