Question

0

155

Views

JavaScript canvas fillRect visible border

I am trying to render histogram with js canvas, it works fine but I am having some troubles with visible border when using fillRect. I know it is caused by bucket width being floating point instead of integer but rouding my bucket width to integer would result in it being too large or too small(depends on buckets amount). So my question is, is there any workaround to get rid of this border?

// problem with bucket width being floating point
const bucketWidth = (Math.round(((desiredHistogramWidth / (data.buckets.length - 1))) * 100) / 100)
for (let i = 0; i < data.buckets.length - 1; ++i) {
  ctx.fillStyle = `rgb(${colors[i][0]}, ${colors[i][1]}, ${colors[i][2]})`;
  const x = histogramXOffset + i * bucketWidth;
  ctx.fillRect(x, histogramHeight, bucketWidth, -data.buckets[i] * heightPixelRatio);
  ctx.fillRect(x, histogramHeight + 20, bucketWidth, 20);
}

This kind of behaviour can be observed in this minimal reproducible example when bucket width is floating point.

const data = [
  1034,
  783,
  700,
  699,
  212,
  123,
  300,
  323,
  344,
  344,
  434,
  344,
  434,
  434,
  0,
  0
];


const canvas = document.getElementById('histogram');
const ctx = canvas.getContext('2d');

const [ width, height ] = [ canvas.clientWidth, canvas.clientHeight ]

ctx.canvas.width = width;
ctx.canvas.height = height;

const max = Math.max(...data);
const heightPixelRatio = ((height) / max);
const bucketWidth = Math.round(width / (data.length) * 100) / 100

console.log(bucketWidth)

for (let i = 0; i < data.length; ++i) {
  ctx.fillStyle = '#000';
  const x = i * bucketWidth;
  ctx.fillRect(x, height, bucketWidth, -data[i] * heightPixelRatio);
}

.histogram {
  width: 600px;
  height: 800px;
  background: #ebecd2;
}

<canvas id="histogram" class="histogram"></canvas>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-28T07:31:13.921Z

How about something like this:

const data = [
  1034,  783,  700,  699,
  212,  123,  300,  323,
  344,  344,  434,  344,
  434,  434,  100,  200
];

const canvas = document.getElementById('histogram');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 180;

const heightRatio = canvas.height / Math.max(...data);
const bucketWidth = canvas.width / data.length

for (let i = 0; i < data.length; ++i) {  
  ctx.fillRect(
    i * bucketWidth, 
    canvas.height, 
    bucketWidth + 0.5, 
    -data[i] * heightRatio
  );
}

<canvas id="histogram" ></canvas>

Key points:

For the bucketWidth we just use canvas.width / data.length
On the fillRect we do bucketWidth + 0.5 adding a tiny amount

Another option I was just experimenting is to just fill once:

const data = [
  1034,  783,  700,  680,
  212,  123,  300,  323,
  354,  340,  434,  344,
  444,  430,  100,  200
];

const canvas = document.getElementById('histogram');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 180;

const heightRatio = canvas.height / Math.max(...data);
const bucketWidth = canvas.width / data.length

for (let i = 0; i < data.length; ++i) {  
  ctx.rect(
    i * bucketWidth, 
    canvas.height, 
    bucketWidth, 
    -data[i] * heightRatio
  );
}
ctx.fill()

<canvas id="histogram" ></canvas>

For cases with large amount of buckets, you just can not show them all at once, there must be a next button or create some kind of infinite side scroll, there are not many options.
A value of 0.01 can not be a valid bucketWidth that just won't display anything

0

155

JavaScript canvas fillRect visible border

1 answers

0

Find remote jobs

Andres GPT