Adjust Canvas Background In Javascript

I'm trying to drawn a rect on canvas, but I want that canvas has lightly transparent background, but that drawn rect has no background. What I will is something as follows: I have

Solution 1:

This could be achieved in several ways (compositing, clip-path...) but the easiest for such a simple path is probably to use the "evenodd" fill-rule parameter of fill() method which will allow us to draw this rectangle with a hole.

The process is simply to draw a first rect the size of the canvas, then, in the same path declaration, draw your own smaller rectangle. The fill-rule will then exclude this smaller inner rectangle from the bigger one.

function drawRect() {
  ctx.beginPath(); // a single path
  // the big rectangle, covering the whole canvas
  ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
  // your smaller, inner rectangle
  ctx.setTransform(1, 0, 0, 1, rect.startX + rect.w / 2, rect.startY + rect.h / 2);
  ctx.rotate(rect.rotate);
  ctx.rect(-rect.w / 2, -rect.h / 2, rect.w, rect.h);
  // set the fill-rule to evenodd
  ctx.fill('evenodd');
  // stroke
  // start a new Path declaration
  ctx.beginPath
  // redraw only the small rect
  ctx.rect(-rect.w / 2, -rect.h / 2, rect.w, rect.h);
  ctx.stroke();
}



var canvas = document.getElementById('canvas');
var img = document.getElementById('photo');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var update = true; // when true updates canvas
var original_source = img.src;
img.src = original_source;

function init() {
  img.addEventListener('load', function() {
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
  // set our context's styles here
  ctx.fillStyle = 'rgba(0,0,0,.5)';
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 2;
  });

  // start the rendering loop
  requestAnimationFrame(updateCanvas);
}

// main render loop only updates if update is true
function updateCanvas() {
  if (update) {
    drawCanvas();
    update = false;
  }

  requestAnimationFrame(updateCanvas);
}

// draws a rectangle with rotation 

// clears canvas sets filters and draws rectangles
function drawCanvas() {
  // restore the default transform as rectangle rendering does not restore the transform.
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawRect()
}

// create new rect add to array 
function mouseDown(e) {
  rect = {
    startX: e.offsetX,
    startY: e.offsetY,
    w: 1,
    h: 1,
    rotate: 0,
  };
  drag = true;
}

function mouseUp() {
  drag = false;
  buttons_shown = true;
  update = true;
}

function mouseMove(e) {
  if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX;
    rect.h = (e.pageY - this.offsetTop) - rect.startY;
    update = true;
  }
}

init();

.hide {
  display: none !important;
}

canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: inline-block;
  background: rgba(0, 0, 0, 0.3);
}

<div style="position: relative; overflow: hidden;display:inline-block;">
  <img id="photo" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" />
  <canvas id="canvas"></canvas>
</div>


<div id="buttons" class="hide"></div>

Solution 2:

Try filling your rect before calling ctx.stroke(), like this:

ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
ctx.fill();

This will produce similar effect to what you have shown in your question. Now the inside of rectangle has both css and fillStyle effect, so it's not ideal - for even better effect you would have to fill outside of rect with desired style instead of setting background in css.

Solution 3:

first, draw a full canvas with semi-transparent background, like

ctx.fillStyle = 'rgba(32, 32, 32, 0.7)';
ctx.fillRect(0, 0, width, height);

Then just clear your rectangular form this canvas

ctx.clearRect(x, y, mini_width, mini_height);