html5 canvas drawImage from one canvas to another -

i have 2 canvas first canvas original size second canvas twice bigger. @ same time drawing on both canvas, on second canvas draw twice bigger elements it's looks on zoomed first canvas.

how like:

problem when try redraw big canvas small canvas got paintings little brighter, brighter 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 square      pencil = new pencil(smallctx, bigctx, 1, "0,0,0", 0.3, moretimes);        pointerpos = {};  //for pointer position      var iscandraw = false;              /****** mouse events 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'>

you making context.linewidth twice wide on big canvas setting moretimes=2.

that makes stroke on bigger canvas appear darker.