html5 canvas drawImage from one canvas to another - html

Question

I have two canvas first canvas is original size second canvas is twice bigger. At the same time i drawing on the both canvas, but on the second canvas i draw twice bigger elements it's looks like on zoomed first canvas.
How look like:
Problem is when i try redraw from big canvas to small canvas i got my paintings a little brighter, but only brighter is where use pencil:
smallCtx.clearRect(0, 0, smallCanvas.width, smallCanvas.height);
smallCtx.drawImage(bigCanvas, 0, 0, paperFullWidth, paperFullHeight);
Full code:
$(document).ready(function() {
function Pencil(smallCtx, bigCtx, size, color, opacity, moreTimes) {
this.init(smallCtx, bigCtx, size, color, opacity, moreTimes);
}
Pencil.prototype = {
smallCtx: null, moreTimes: null,
prevMouseX: null, prevMouseY: null,
moreTimes: 1,
color: '0, 0, 0',
opacity: 1,
init: function(smallCtx, bigCtx, size, color, opacity, moreTimes) {
this.smallCtx = smallCtx;
this.bigCtx = bigCtx;
this.setSize(size);
this.setColor(color);
this.setOpacity(opacity);
this.moreTimes = moreTimes;
},
stroke: function(mouseX, mouseY, scale) {
/* in first canvas drawing */
this.smallCtx.beginPath();
this.smallCtx.moveTo(this.prevMouseX, this.prevMouseY);
this.smallCtx.lineTo(mouseX, mouseY);
this.smallCtx.closePath();
this.smallCtx.stroke();
/* in second canvas drawing scaled */
this.bigCtx.lineWidth = this.smallCtx.lineWidth * this.moreTimes;
this.bigCtx.beginPath();
this.bigCtx.moveTo( this.prevMouseX * this.moreTimes, this.prevMouseY * this.moreTimes);
this.bigCtx.lineTo( mouseX * this.moreTimes, mouseY * this.moreTimes );
this.bigCtx.closePath();
this.bigCtx.stroke();
this.move(mouseX, mouseY);
},
move: function(mouseX, mouseY) {
this.prevMouseX = mouseX;
this.prevMouseY = mouseY;
},
/* GETTERS */
getSize: function() {
return this.smallCtx.lineWidth;
},
getColor: function() {
return this.color;
},
getOpacity: function() {
return this.opacity;
},
/* SETTERS */
setSize: function(size) {
this.smallCtx.lineWidth = size;
},
setColor: function(color) {
this.color = color; //rgb like: 255,0,0
this.bigCtx.shadowBlur = this.smallCtx.shadowBlur = 0;
this.setStrokeStyle();
},
setOpacity: function(opacity) {
this.opacity = opacity;
this.setStrokeStyle();
},
setStrokeStyle: function() {
this.bigCtx.strokeStyle = this.smallCtx.strokeStyle =
this.bigCtx.fillStyle = this.smallCtx.fillStyle = 'rgba(' + this.getColor() + ', ' + this.getOpacity() +')';
},
}
var smallCanvas = document.getElementById("smallCanvas");
var smallCtx = smallCanvas.getContext("2d");
var bigCanvas = document.getElementById("bigCanvas");
var bigCtx = bigCanvas.getContext("2d");
var paperFullWidth = 150;
var paperFullHeight = 150;
var moreTimes = 2;
var scale = 100;
smallCanvas.width = paperFullWidth;
smallCanvas.height = paperFullHeight;
bigCanvas.width = paperFullWidth * moreTimes;
bigCanvas.height = paperFullHeight * moreTimes;
fillCanvas('rgba(255,255,255,1)');
drawSquare(); //draw a square
pencil = new Pencil(smallCtx, bigCtx, 1, "0,0,0", 0.3, moreTimes);
pointerPos = {}; //for pointer position
var isCanDraw = false;
/****** MOUSE EVENTS FOR CANVAS ******/
$('#smallCanvas').on('mousedown', function(e) {
pointerPos = getMousePos(smallCanvas, e);
isCanDraw = true;
pencil.move(pointerPos.x, pointerPos.y);
});
$('#smallCanvas').on('mouseup', function(e) {
pointerPos = getMousePos(smallCanvas, e);
isCanDraw = false;;
});
$('#smallCanvas').on('mousemove', function(e) {
if(isCanDraw) {
pointerPos = getMousePos(smallCanvas, e);
pencil.stroke( pointerPos.x, pointerPos.y, scale );
}
});
$('#redraw').click(function() {
smallCtx.clearRect(0, 0, smallCanvas.width, smallCanvas.height);
smallCtx.drawImage(bigCanvas, 0, 0, paperFullWidth, paperFullHeight);
});
function fillCanvas(color) {
var tempFillStyle = smallCtx.fillStyle;
bigCtx.fillStyle = smallCtx.fillStyle = color;
smallCtx.fillRect(0, 0, smallCanvas.width, smallCanvas.height);
bigCtx.fillRect(0, 0, bigCanvas.width, bigCanvas.height);
bigCtx.fillStyle = smallCtx.fillStyle = tempFillStyle;
}
function getMousePos(canvas, evt) {
evt = evt.originalEvent || window.event || evt;
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function drawSquare() {
smallCtx.fillStyle = bigCtx.fillStyle = 'rgba(0,0,0,0.3)';
smallCtx.fillRect(0,0,60,60);
bigCtx.fillRect(0,0,60*moreTimes,60*moreTimes);
}
});
*{
background-color:#CECECE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id='smallCanvas' style='z-index: 1;'></canvas>
<canvas id="bigCanvas"></canvas>
<input type='button' id='redraw' value='Redraw'>

Answer 1

You are making the context.lineWidth twice as wide on the big canvas by setting moreTimes=2.
That makes the stroke on the bigger canvas appear darker.