Home Adjust canvas background in Javascript
Reply: 3

Adjust canvas background in Javascript

Boky
1#
Boky Published in 2018-02-14 09:21:28Z

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 code as follows:

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);
    });
    // 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 
function drawRect(){
   ctx.setTransform(1,0,0,1,rect.startX + rect.w / 2, rect.startY + rect.h / 2);
   ctx.rotate(rect.rotate);
   ctx.beginPath();
   ctx.rect(-rect.w/2, -rect.h/2, rect.w, rect.h);
   /* ctx.fill(); */
   ctx.stroke();
}

// 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>

In my example I set the background of the canvas to what I will but I cannot remove that background for the drawn rect, it has the same color as the canvas.

Here is the fiddle.

Any idea how to solve it?

Kaiido
2#
Kaiido Reply to 2018-02-15 02:01:42Z

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>

Tomasz Bubała
3#
Tomasz Bubała Reply to 2018-02-14 09:38:57Z

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.

mansim
4#
mansim Reply to 2018-02-14 10:11:01Z

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);
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.414505 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO