Obtaining the coordinate of a null value when using spanGaps with ChartJS?

Issue

I'm wondering if ChartJS exposes an API for plugins that allows us to obtain the coordinate of a null point that has been "Spanned" by ChartJS?

For example as illustrated in this question ChartJS enables smooth curves through null points when settings spanGaps to true.

So we could have data points like this.

data: [7, null, 11, null,  5 , null,  8, null,   3, null,  7],

Corresponding to these labels.

["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Blue", "Yellow", "Green", "Purple", "Green"],

Is there a way ( Perhaps via the Plugin API ) to get the values of the nulls?

So for a given quadratic curve that chart JS draws for:

data: [7, null, 11, null,  5 , null,  8, null,   3, null,  7],

We could call for example:

const arr = ChartJSPluginAPI.deriveNulls(data);

And get something like:

data: [7, 8, 11, 6, 5 , 6,  8, 4, 3, 5, 7],

Thoughts?

Solution

Finding the interpolated values as they are calculated by chart.js is not trivial, because chart.js performs the interpolation in graphical mode only, so we have to get the graphical values of the existing points for the relevant datasets meta, perform the interpolation, and then get back to the real space, using the y-axis scaling. This is however safer than trying to emulate the interpolation mathematically in real space.

The first thing in finding the intermediate values is to identify the functions used by chart.js to interpolate all the values of the curves; there are three functions: _steppedInterpolation for stepped line charts, _bezierInterpolation if there is a tension option set, and the default linear interpolation as _pointInLine.

const _bezierInterpolation = Chart.helpers._bezierInterpolation,
    _steppedInterpolation = Chart.helpers._steppedInterpolation,
    _pointInLine = Chart.helpers._pointInLine;

Note that if modules are used, the helpers module needs to be imported separately.

An important point is to perform the computation after the animation is completed, since for instance the bezier coefficients (if bezier interpolation was used) are constantly recomputed during the animation, and their final values can only be obtained after the animation is finalized. So, we implement the computation in the animation's onComplete handler:

onComplete: function({chart}){
   const datasetMetas = chart.getSortedVisibleDatasetMetas();
   for(const datasetMeta of datasetMetas){
      if(datasetMeta.type === 'line'){
         const controller = datasetMeta.controller,
            spanGaps = controller.options.spanGaps,
            dataRaw = controller._data;
         if(spanGaps && dataRaw.includes(null)){
            const gData = datasetMeta.data,
               yScale = datasetMeta.yScale,
               yValues = []; // the final result
            const tension = controller.options.tension || controller.options.elements.line.tension;
               interpolation = controller.options.stepped ? _steppedInterpolation :
                  tension ? _bezierInterpolation : _pointInLine;
            for(let i = 0; i < gData.length; i++){
               if(dataRaw[i] !== null){
                  yValues.push(dataRaw[i]);
               }
               else if(i === 0 || i ===gData.length-1){
                  yValues.push(null); // no interpolation for extreme points
               }
               else{
                  const pLeft = gData[i-1],
                     pThis = gData[i],
                     pRight = gData[i+1];
                  const xgLeft = pLeft.x, xg = pThis.x, xgRight = pRight.x,
                     frac = (xg - xgLeft) / (xgRight - xgLeft);
                  let {y: yg} = interpolation(pLeft, pRight, frac);
                  yValues.push(yScale.getValueForPixel(yg));
               }
            }
            console.log(`For dataset ${controller.index}:`, yValues);
         }
      }
   }
}

This solution assumes the index axis is x and the value axis is y; it should work regardless of the type of the x axis (category, linear, time, etc.).

Here's a full snippet with this solution applied to the OP example.

const _bezierInterpolation = Chart.helpers._bezierInterpolation,
    _steppedInterpolation = Chart.helpers._steppedInterpolation,
    _pointInLine = Chart.helpers._pointInLine;
// note: different access with modules

const config = {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Blue", "Yellow", "Green", "Purple", "Green"],
        datasets: [{
            label: '# of Votes',
            data: [7, null, 11, null,  5 , null,  8, null,   3, null,  7],
            spanGaps: true,
            fill: true,
            borderWidth: 1,
            pointHitRadius: 25,
            tension: 0.4
        }]
    },
    options: {
       animation:{
            onComplete: function({chart}){
                const datesetMetas = chart.getSortedVisibleDatasetMetas();
                for(const datasetMeta of datesetMetas){
                    if(datasetMeta.type === 'line'){
                        const controller = datasetMeta.controller,
                            spanGaps = controller.options.spanGaps,
                            dataRaw = controller._data;
                        if(spanGaps && dataRaw.includes(null)){
                            const gData = datasetMeta.data,
                                yScale = datasetMeta.yScale,
                                yValues = []; // the final result
                            const tension = controller.options.tension || controller.options.elements.line.tension;
                                interpolation = controller.options.stepped ? _steppedInterpolation :
                                    tension ? _bezierInterpolation : _pointInLine;
                            for(let i = 0; i < gData.length; i++){
                                if(dataRaw[i] !== null){
                                    yValues.push(dataRaw[i]);
                                }
                                else if(i === 0 || i ===gData.length-1){
                                    yValues.push(null); // no interpolation for extreme points
                                }
                                else{
                                    const pLeft = gData[i-1],
                                        pThis = gData[i],
                                        pRight = gData[i+1];
                                    const xgLeft = pLeft.x, xg = pThis.x, xgRight = pRight.x,
                                        frac = (xg - xgLeft) / (xgRight - xgLeft);
                                    let {y: yg} = interpolation(pLeft, pRight, frac);
                                    yValues.push(yScale.getValueForPixel(yg));
                                }
                            }
                            console.log(`For dataset ${controller.index}:`, yValues);
                        }
                    }
                }
            }
        },
        scales: {
            y: {
                min: 0,
                max: 20
            }
        }
    }
}

const chart = new Chart('chartJSContainer', config);

<div style="min-height: 60vh">
    <canvas id="chartJSContainer" style="background-color: #eee;">
    </canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answered By - kikon

Read More

Recolour all pixels of a specific colour in an image overlay in Leaflet

Issue

I have an image approximately 8000x4000 pixels. This image is broken up into blobs of colour.

Here is an example of part of the image to show what it looks like:

I'm able to plot the image using leaflet pretty trivially:

var map = L.map('map', {
    crs: L.CRS.Simple,
    minZoom: -2
});

var bounds = [[0,0], [3616,8192]];

var provinces = L.imageOverlay(
    'myimage.png', 
    bounds, 
    {opacity: 0.7}
).addTo(map);

I have a translation for recolouring the image, and I want to use it to transform all pixels of a specific colour to pixels of a different specific colour. This is the problem I need help with.

var colour_mapping = {'#4287f5':'#42f5ef', '#a3911c':'#de3510', ...}

I've seen answers on stack overflow detailing how to change specific pixels of a canvas, but I don't know how best to achieve the effect working within Leaflet.

i.e. How would I replace all pixels of a specific RGB in a PNG with another RGB in javascript?

Solution

As you already figured yourself to be able to manipulate an image 'on the fly' you have to paint it onto a html <canvas> element first. On the other hand Leaflet's imageOverlay() method expects an URL to an actual image - so the manipulated canvas alone won't bring you too far.

There's hope though. The canvas object offers a method called toDataURL() which returns something you can feed into imageOverlay().

Let's break-down what you'll have to do:

1. Create an empty Image and use it to load your map
2. If loading of the image finished, create a canvas the size of your image
3. Draw the image to the canvas
4. Loop over the canvas' image data obtained via ctx.getImageData(). This will return a large array of red, green, blue and alpha values for each pixel in the canvas. As your colour_mapping object consists of hex values e.g. #4dc8c8, we first need to convert the rgb values to hex to be able to look up the object for a match. If we found a match, get the replacement color and convert the hex value to rgb to ultimately change the color.
5. Draw the manipulated image data onto the canvas.
6. Get the data URL using toDataURL() and finally call imageOverlay().

Here's an example showcasing the replacement of two colors by white:

var map = L.map('map').setView([0.5, 0.5], 9);


var imageUrl = './js/UAZyt.png';
imageUrl = "https://corsproxy.io/?https://i.stack.imgur.com/UAZyt.png"
let image = new Image();
image.crossOrigin = "anonymous"
image.onload = (e) => {
  imageBounds = [
    [0, 0],
    [1, 1]
  ];

  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  canvas.width = e.target.naturalWidth;
  canvas.height = e.target.naturalHeight;
  ctx.drawImage(e.target, 0, 0);
  let colour_mapping = {
    '#4dc8c8': '#ffffff',
    '#be8eff': '#ffffff'
  };

  let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  let r, g, b, hex, hex2;
  for (let a = 0; a < imageData.data.length; a += 4) {
    r = imageData.data[a];
    g = imageData.data[a + 1];
    b = imageData.data[a + 2];
    hex = "#" + ((r << 16) | (g << 8) | b).toString(16);
    if (colour_mapping[hex]) {
      hex2 = colour_mapping[hex].match(/[0-9a-f]{2}/g);
      imageData.data[a] = parseInt(hex2[0], 16);
      imageData.data[a + 1] = parseInt(hex2[1], 16);
      imageData.data[a + 2] = parseInt(hex2[2], 16);
    }
  }
  ctx.putImageData(imageData, 0, 0);
  L.imageOverlay(canvas.toDataURL(), imageBounds).addTo(map);
}
image.src = imageUrl;

#map {
  height: 360px;
}

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<div id="map"></div>

Answered By - obscure

Read More

Recolour all pixels of a specific colour in an image overlay in Leaflet

Issue

I have an image approximately 8000x4000 pixels. This image is broken up into blobs of colour.

Here is an example of part of the image to show what it looks like:

I'm able to plot the image using leaflet pretty trivially:

var map = L.map('map', {
    crs: L.CRS.Simple,
    minZoom: -2
});

var bounds = [[0,0], [3616,8192]];

var provinces = L.imageOverlay(
    'myimage.png', 
    bounds, 
    {opacity: 0.7}
).addTo(map);

I have a translation for recolouring the image, and I want to use it to transform all pixels of a specific colour to pixels of a different specific colour. This is the problem I need help with.

var colour_mapping = {'#4287f5':'#42f5ef', '#a3911c':'#de3510', ...}

I've seen answers on stack overflow detailing how to change specific pixels of a canvas, but I don't know how best to achieve the effect working within Leaflet.

i.e. How would I replace all pixels of a specific RGB in a PNG with another RGB in javascript?

Solution

As you already figured yourself to be able to manipulate an image 'on the fly' you have to paint it onto a html <canvas> element first. On the other hand Leaflet's imageOverlay() method expects an URL to an actual image - so the manipulated canvas alone won't bring you too far.

There's hope though. The canvas object offers a method called toDataURL() which returns something you can feed into imageOverlay().

Let's break-down what you'll have to do:

1. Create an empty Image and use it to load your map
2. If loading of the image finished, create a canvas the size of your image
3. Draw the image to the canvas
4. Loop over the canvas' image data obtained via ctx.getImageData(). This will return a large array of red, green, blue and alpha values for each pixel in the canvas. As your colour_mapping object consists of hex values e.g. #4dc8c8, we first need to convert the rgb values to hex to be able to look up the object for a match. If we found a match, get the replacement color and convert the hex value to rgb to ultimately change the color.
5. Draw the manipulated image data onto the canvas.
6. Get the data URL using toDataURL() and finally call imageOverlay().

Here's an example showcasing the replacement of two colors by white:

var map = L.map('map').setView([0.5, 0.5], 9);


var imageUrl = './js/UAZyt.png';
imageUrl = "https://corsproxy.io/?https://i.stack.imgur.com/UAZyt.png"
let image = new Image();
image.crossOrigin = "anonymous"
image.onload = (e) => {
  imageBounds = [
    [0, 0],
    [1, 1]
  ];

  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  canvas.width = e.target.naturalWidth;
  canvas.height = e.target.naturalHeight;
  ctx.drawImage(e.target, 0, 0);
  let colour_mapping = {
    '#4dc8c8': '#ffffff',
    '#be8eff': '#ffffff'
  };

  let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  let r, g, b, hex, hex2;
  for (let a = 0; a < imageData.data.length; a += 4) {
    r = imageData.data[a];
    g = imageData.data[a + 1];
    b = imageData.data[a + 2];
    hex = "#" + ((r << 16) | (g << 8) | b).toString(16);
    if (colour_mapping[hex]) {
      hex2 = colour_mapping[hex].match(/[0-9a-f]{2}/g);
      imageData.data[a] = parseInt(hex2[0], 16);
      imageData.data[a + 1] = parseInt(hex2[1], 16);
      imageData.data[a + 2] = parseInt(hex2[2], 16);
    }
  }
  ctx.putImageData(imageData, 0, 0);
  L.imageOverlay(canvas.toDataURL(), imageBounds).addTo(map);
}
image.src = imageUrl;

#map {
  height: 360px;
}

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<div id="map"></div>

Answered By - obscure

Read More

Resize image with javascript canvas (smoothly)

Issue

I'm trying to resize some images with canvas but I'm clueless on how to smoothen them. On photoshop, browsers etc.. there are a few algorithms they use (e.g. bicubic, bilinear) but I don't know if these are built into canvas or not.

Here's my fiddle: http://jsfiddle.net/EWupT/

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width=300
canvas.height=234
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);

The first one is a normal resized image tag, and the second one is canvas. Notice how the canvas one is not as smooth. How can I achieve 'smoothness'?

Solution

You can use down-stepping to achieve better results. Most browsers seem to use linear interpolation rather than bi-cubic when resizing images.

(Update There has been added a quality property to the specs, imageSmoothingQuality which is currently available in Chrome only.)

Unless one chooses no smoothing or nearest neighbor the browser will always interpolate the image after down-scaling it as this function as a low-pass filter to avoid aliasing.

Bi-linear uses 2x2 pixels to do the interpolation while bi-cubic uses 4x4 so by doing it in steps you can get close to bi-cubic result while using bi-linear interpolation as seen in the resulting images.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    // step 1 - resize to 50%
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    // step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";

<img src="//i.imgur.com/SHo6Fub.jpg" width="300" height="234">
<canvas id="canvas" width=300></canvas>

Depending on how drastic your resize is you can might skip step 2 if the difference is less.

In the demo you can see the new result is now much similar to the image element.

Answered By - user1693593

Read More

Why do I see a margin on the svg?

Issue

I am trying to add my logo to the header of my webpage but I keep seeing this margin around the svg when i check for the appearance on smaller screens.

Here is my html file

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Restaurant</title>
</head>
<body>
    <header>
        <div id="logo">
            <img src="img/logo.svg" alt="">
            <p>RESTAURANT</p>
        </div>
    </header>
</body>
</html>type here

Here is my style.css file

*{
    margin: 0;
    padding: 0;
    /* border: 1px solid red; */
}

body{
    background-color: black;
    color: white;
}


#logo img{
    background: white;
    
}


#logo p{
    font-size: 16.2;
    font-family: sans-serif;
    font-weight: bold;
    margin-left: 35px;
    letter-spacing: 0.2px;
}

Here is logo.svg This file contains the logo that I want to include in my header

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 70.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,70.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z
m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13
2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14
122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19
-75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12
-106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41
10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29
-123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63
22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33
-72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22
11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0
-78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24
-5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4
-23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13
-11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z
m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104
-45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27
43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57
55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47
33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55
3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14
55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7
-8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/>
<path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44
83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/>
</g>
</svg>

It looks fine on the big screen But on smaller screens there is this margin around the svg I tried to crop the svg but that didn't work Almost every other solution i could think of failed

Solution

All you need to do is changing viewBox="0 0 241.000000 27.000000" and the transform="translate(0.000000,27.000000)" part on your svg code, it was just an extra space so decreasing the size as above mentioned will fix that problem

I have edited your svg code, just replace it with this code right below:

 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 27.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,27.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z
m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13
2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14
122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19
-75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12
-106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41
10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29
-123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63
22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33
-72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22
11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0
-78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24
-5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4
-23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13
-11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z
m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104
-45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27
43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57
55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47
33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55
3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14
55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7
-8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/>
<path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44
83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/>
</g>
</svg>

Answered By - gentbrika

Read More

How can I stop my number of balls being added in my HTML canvas exponentially?

Issue

I currently have a code that when the user clicks on addBall(), a new ball is created on a canvas and they bounce around. However, when the user clicks this button more and more, the number of balls added is the same as the previous count should have been. It should only be adding one every time the button is clicked.

Imagine you click the button once, it will add one ball. Click it again, it adds two balls. Click it one more time, it adds 3 balls. This continues on in this way forever until my poor little Chromebook crashes.

Question: How can I make the number of balls being made per click be one forever?

function lineMessage(msg) {
    document.querySelector('#myMessage').textContent += msg + '. ';
}

function groupMessage(msg) {
    document.querySelector('#myMessage').innerHTML += msg + '<br/>';
}

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 550;
const ballCount = document.querySelector('#ball-count');

const gravity = 0;
const wallLoss = 1;
let numBalls = 0;  // approx as will not add ball if space can not be found
const minBallSize = 13;
const maxBallSize = 20;
const velMin = 1;
const velMax = 5; 
const maxResolutionCycles = 100;

Math.TAU = Math.PI * 2;
Math.rand = (min, max) => Math.random() * (max - min) + min;
Math.randI = (min, max) => Math.random() * (max - min) + min | 0; // only for positive numbers 32bit signed int
Math.randItem = arr => arr[Math.random() * arr.length | 0]; // only for arrays with length < 2 ** 31 - 1
// contact points of two circles radius r1, r2 moving along two lines (a,e)-(b,f) and (c,g)-(d,h) [where (,) is coord (x,y)]
Math.circlesInterceptUnitTime = (a, e, b, f, c, g, d, h, r1, r2) => { // args (x1, y1, x2, y2, x3, y3, x4, y4, r1, r2)
    const A = a * a, B = b * b, C = c * c, D = d * d;
    const E = e * e, F = f * f, G = g * g, H = h * h;
    var R = (r1 + r2) ** 2;
    const AA = A + B + C + F + G + H + D + E + b * c + c * b + f * g + g * f + 2 * (a * d - a * b - a * c - b * d - c * d - e * f + e * h - e * g - f * h - g * h);
    const BB = 2 * (-A + a * b + 2 * a * c - a * d - c * b - C + c * d - E + e * f + 2 * e * g - e * h - g * f - G + g * h);
    const CC = A - 2 * a * c + C + E - 2 * e * g + G - R;
    return Math.quadRoots(AA, BB, CC);
}  

Math.quadRoots = (a, b, c) => { // find roots for quadratic
    if (Math.abs(a) < 1e-6) {
        return b != 0 ? [-c / b] : [] 
    }

    b /= a;
    var d = b * b - 4 * (c / a);

    if (d > 0) {
        d = d ** 0.5;
        return  [0.5 * (-b + d), 0.5 * (-b - d)]
    }

    return d === 0 ? [0.5 * -b] : [];
}

Math.interceptLineBallTime = (x, y, vx, vy, x1, y1, x2, y2, r) => {
    const xx = x2 - x1;
    const yy = y2 - y1;
    const d = vx * yy - vy * xx;

    if (d > 0) {  // only if moving towards the line
        const dd = r / (xx * xx + yy * yy) ** 0.5;
        const nx = xx * dd;
        const ny = yy * dd;
        return (xx * (y - (y1 + nx)) - yy * (x - (x1 - ny))) / d;
    }
}

const balls = [];
const lines = [];

function Line(x1, y1, x2, y2) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
}

Line.prototype = {
    draw() {
        ctx.moveTo(this.x1, this.y1);
        ctx.lineTo(this.x2, this.y2);
    },
    reverse() {
        const x = this.x1;
        const y = this.y1;
        this.x1 = this.x2;
        this.y1 = this.y2;
        this.x2 = x;
        this.y2 = y;
        return this;
    }
}
        
function Ball(x, y, vx, vy, r = 45, m = 4 / 3 * Math.PI * (r ** 3)) {
    this.r = r;
    this.m = m;
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
}

Ball.prototype = {
    update() {
        this.x += this.vx;
        this.y += this.vy;
        this.vy += gravity;
    },
    draw() {
        ctx.moveTo(this.x + this.r, this.y);
        ctx.arc(this.x, this.y, this.r, 0, Math.TAU);
    },
    interceptLineTime(l, time) {
        const u = Math.interceptLineBallTime(this.x, this.y, this.vx, this.vy, l.x1, l.y1, l.x2, l.y2, this.r);

        if (u >= time && u <= 1) {
            return u;
        }
    },
    checkBallBallTime(t, minTime) {
        return t > minTime && t <= 1;
    },
    interceptBallTime(b, time) {
        const x = this.x - b.x;
        const y = this.y - b.y;
        const d = (x * x + y * y) ** 0.5;

        if (d > this.r + b.r) {
            const times = Math.circlesInterceptUnitTime(
                this.x, this.y, 
                this.x + this.vx, this.y + this.vy, 
                b.x, b.y,
                b.x + b.vx, b.y + b.vy, 
                this.r, b.r
            )

            if (times.length) {
                if (times.length === 1) {
                    if (this.checkBallBallTime(times[0], time)) {
                        return times[0]
                    }

                    return;
                }

                if (times[0] <= times[1]) {
                    if (this.checkBallBallTime(times[0], time)) {
                        return times[0]
                    }

                    if (this.checkBallBallTime(times[1], time)) {
                        return times[1]
                    }

                    return
                }

                if (this.checkBallBallTime(times[1], time)) { 
                    return times[1]
                }      

                if (this.checkBallBallTime(times[0], time)) {
                    return times[0]
                }
            }
        }
    },
    collideLine(l, time) {
        const x1 = l.x2 - l.x1;
        const y1 = l.y2 - l.y1;
        const d = (x1 * x1 + y1 * y1) ** 0.5;
        const nx = x1 / d;
        const ny = y1 / d;            
        const u = (this.vx  * nx + this.vy  * ny) * 2;
        this.x += this.vx * time;   
        this.y += this.vy * time;   
        this.vx = (nx * u - this.vx) * wallLoss;
        this.vy = (ny * u - this.vy) * wallLoss;
        this.x -= this.vx * time;
        this.y -= this.vy * time;
    },
    collide(b, time) {
        const a = this;
        const m1 = a.m;
        const m2 = b.m;
        const x = a.x - b.x
        const y = a.y - b.y  
        const d = (x * x + y * y);
        const u1 = (a.vx * x + a.vy * y) / d
        const u2 = (x * a.vy - y * a.vx ) / d
        const u3 = (b.vx * x + b.vy * y) / d
        const u4 = (x * b.vy - y * b.vx ) / d
        const mm = m1 + m2;
        const vu3 = (m1 - m2) / mm * u1 + (2 * m2) / mm * u3;
        const vu1 = (m2 - m1) / mm * u3 + (2 * m1) / mm * u1;
        a.x = a.x + a.vx * time;
        a.y = a.y + a.vy * time;
        b.x = b.x + b.vx * time;
        b.y = b.y + b.vy * time;
        b.vx = x * vu1 - y * u4;
        b.vy = y * vu1 + x * u4;
        a.vx = x * vu3 - y * u2;
        a.vy = y * vu3 + x * u2;
        a.x = a.x - a.vx * time;
        a.y = a.y - a.vy * time;
        b.x = b.x - b.vx * time;
        b.y = b.y - b.vy * time;
    },
    doesOverlap(ball) {
        const x = this.x - ball.x;
        const y = this.y - ball.y;
        return  (this.r + ball.r) > ((x * x + y * y) ** 0.5);  
    }       
}

function canAdd(ball) {
    for (const b of balls) {
        if (ball.doesOverlap(b)) {
            return false
        }
    }

    return true;
}

function create(bCount) {
    lines.push(new Line(-10, 10, ctx.canvas.width + 10, 5));
    lines.push((new Line(-10, ctx.canvas.height - 2, ctx.canvas.width + 10, ctx.canvas.height - 10)).reverse());
    lines.push((new Line(10, -10, 4, ctx.canvas.height + 10)).reverse());
    lines.push(new Line(ctx.canvas.width - 3, -10, ctx.canvas.width - 10, ctx.canvas.height + 10)); 

    while (bCount--) {
        let tries = 100;
        debugger

        while (tries--) {
            const dir = Math.rand(0, Math.TAU);
            const vel = Math.rand(velMin, velMax);
            const ball = new Ball(
                Math.rand(maxBallSize + 10, canvas.width - maxBallSize - 10), 
                Math.rand(maxBallSize + 10, canvas.height - maxBallSize - 10),
                Math.cos(dir) * vel,
                Math.sin(dir) * vel,
                Math.rand(minBallSize, maxBallSize),
            )

            if (canAdd(ball)) {
                balls.push(ball);
                break;
            }
        }
    }
}

function resolveCollisions() {
    var minTime = 0, minObj, minBall, resolving = true, idx = 0, idx1, after = 0, e = 0;
        
    while (resolving && e++ < maxResolutionCycles) { // too main ball may create very lone resolution cycle. e limits this
        resolving = false;
        minObj = undefined;
        minBall = undefined;
        minTime = 1;
        idx = 0;

        for(const b of balls) {
            idx1 = idx + 1;
            while (idx1 < balls.length) {
                const b1 = balls[idx1++];
                const time = b.interceptBallTime(b1, after);

                if (time !== undefined) {
                    if (time <= minTime) {
                         minTime = time;
                        minObj = b1;
                        minBall = b;
                        resolving = true;
                    }
                }
            }

            for (const l of lines) {
                 const time = b.interceptLineTime(l, after);
                if (time !== undefined) {
                    if (time <= minTime) {
                        minTime = time;
                        minObj = l;
                        minBall = b;
                        resolving = true;
                    }
                }
            }

            idx++;
        }

        if (resolving) {
            if (minObj instanceof Ball) {
                minBall.collide(minObj, minTime);
            } else {
                minBall.collideLine(minObj, minTime);
            }

            after = minTime;
        }
    }
}

function mainLoop() {
    ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
    resolveCollisions();

    for (const b of balls) {
        b.update()
    }

    ctx.strokeStyle = "#000";
    ctx.beginPath();

    for (const b of balls) {
        b.draw()
    }

    for (const l of lines) {
        l.draw()
    }

    ctx.stroke();
    requestAnimationFrame(mainLoop);
}    

function addBall() {
    numBalls++;
    ballCount.innerHTML = numBalls;
    create(numBalls);
}

mainLoop();

#canvas {
    width: 1000px;
    height: 550px
}

#myConsole {
    background-color: black;
    color: white;
    min-height: 100px;
}

<!DOCTYPE html>
<html lang="en">

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport", content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Christian Davis">
        <link rel="stylesheet" href="styles.css">

        <title>Bouncy Balls</title>
    </head>

    <body>
        <button onclick="addBall()">Add Ball</button><br>
        <div>Ball Count: <span id="ball-count">0</span></div>
        <canvas id="canvas"></canvas>
        <p id="myConsole">&gt;&nbsp;<span id="myMessage"></span></p>

        <script src="app2.js"></script>
    </body>
</html>

Solution

The problem is that you are passing a count of balls to the create method when you really only want to create one new ball. For instance, on the second click, create will receive 2 as the bCount parameter and proceed to create two new balls.

Below is your code, the only modification I made is to set bCount = 1; as the very first line in create. This will cause the method to create only ball instead of the count of balls passed in.

function lineMessage(msg) {
    document.querySelector('#myMessage').textContent += msg + '. ';
}

function groupMessage(msg) {
    document.querySelector('#myMessage').innerHTML += msg + '<br/>';
}

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 550;
const ballCount = document.querySelector('#ball-count');

const gravity = 0;
const wallLoss = 1;
let numBalls = 0;  // approx as will not add ball if space can not be found
const minBallSize = 13;
const maxBallSize = 20;
const velMin = 1;
const velMax = 5; 
const maxResolutionCycles = 100;

Math.TAU = Math.PI * 2;
Math.rand = (min, max) => Math.random() * (max - min) + min;
Math.randI = (min, max) => Math.random() * (max - min) + min | 0; // only for positive numbers 32bit signed int
Math.randItem = arr => arr[Math.random() * arr.length | 0]; // only for arrays with length < 2 ** 31 - 1
// contact points of two circles radius r1, r2 moving along two lines (a,e)-(b,f) and (c,g)-(d,h) [where (,) is coord (x,y)]
Math.circlesInterceptUnitTime = (a, e, b, f, c, g, d, h, r1, r2) => { // args (x1, y1, x2, y2, x3, y3, x4, y4, r1, r2)
    const A = a * a, B = b * b, C = c * c, D = d * d;
    const E = e * e, F = f * f, G = g * g, H = h * h;
    var R = (r1 + r2) ** 2;
    const AA = A + B + C + F + G + H + D + E + b * c + c * b + f * g + g * f + 2 * (a * d - a * b - a * c - b * d - c * d - e * f + e * h - e * g - f * h - g * h);
    const BB = 2 * (-A + a * b + 2 * a * c - a * d - c * b - C + c * d - E + e * f + 2 * e * g - e * h - g * f - G + g * h);
    const CC = A - 2 * a * c + C + E - 2 * e * g + G - R;
    return Math.quadRoots(AA, BB, CC);
}  

Math.quadRoots = (a, b, c) => { // find roots for quadratic
    if (Math.abs(a) < 1e-6) {
        return b != 0 ? [-c / b] : [] 
    }

    b /= a;
    var d = b * b - 4 * (c / a);

    if (d > 0) {
        d = d ** 0.5;
        return  [0.5 * (-b + d), 0.5 * (-b - d)]
    }

    return d === 0 ? [0.5 * -b] : [];
}

Math.interceptLineBallTime = (x, y, vx, vy, x1, y1, x2, y2, r) => {
    const xx = x2 - x1;
    const yy = y2 - y1;
    const d = vx * yy - vy * xx;

    if (d > 0) {  // only if moving towards the line
        const dd = r / (xx * xx + yy * yy) ** 0.5;
        const nx = xx * dd;
        const ny = yy * dd;
        return (xx * (y - (y1 + nx)) - yy * (x - (x1 - ny))) / d;
    }
}

const balls = [];
const lines = [];

function Line(x1, y1, x2, y2) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
}

Line.prototype = {
    draw() {
        ctx.moveTo(this.x1, this.y1);
        ctx.lineTo(this.x2, this.y2);
    },
    reverse() {
        const x = this.x1;
        const y = this.y1;
        this.x1 = this.x2;
        this.y1 = this.y2;
        this.x2 = x;
        this.y2 = y;
        return this;
    }
}
        
function Ball(x, y, vx, vy, r = 45, m = 4 / 3 * Math.PI * (r ** 3)) {
    this.r = r;
    this.m = m;
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
}

Ball.prototype = {
    update() {
        this.x += this.vx;
        this.y += this.vy;
        this.vy += gravity;
    },
    draw() {
        ctx.moveTo(this.x + this.r, this.y);
        ctx.arc(this.x, this.y, this.r, 0, Math.TAU);
    },
    interceptLineTime(l, time) {
        const u = Math.interceptLineBallTime(this.x, this.y, this.vx, this.vy, l.x1, l.y1, l.x2, l.y2, this.r);

        if (u >= time && u <= 1) {
            return u;
        }
    },
    checkBallBallTime(t, minTime) {
        return t > minTime && t <= 1;
    },
    interceptBallTime(b, time) {
        const x = this.x - b.x;
        const y = this.y - b.y;
        const d = (x * x + y * y) ** 0.5;

        if (d > this.r + b.r) {
            const times = Math.circlesInterceptUnitTime(
                this.x, this.y, 
                this.x + this.vx, this.y + this.vy, 
                b.x, b.y,
                b.x + b.vx, b.y + b.vy, 
                this.r, b.r
            )

            if (times.length) {
                if (times.length === 1) {
                    if (this.checkBallBallTime(times[0], time)) {
                        return times[0]
                    }

                    return;
                }

                if (times[0] <= times[1]) {
                    if (this.checkBallBallTime(times[0], time)) {
                        return times[0]
                    }

                    if (this.checkBallBallTime(times[1], time)) {
                        return times[1]
                    }

                    return
                }

                if (this.checkBallBallTime(times[1], time)) { 
                    return times[1]
                }      

                if (this.checkBallBallTime(times[0], time)) {
                    return times[0]
                }
            }
        }
    },
    collideLine(l, time) {
        const x1 = l.x2 - l.x1;
        const y1 = l.y2 - l.y1;
        const d = (x1 * x1 + y1 * y1) ** 0.5;
        const nx = x1 / d;
        const ny = y1 / d;            
        const u = (this.vx  * nx + this.vy  * ny) * 2;
        this.x += this.vx * time;   
        this.y += this.vy * time;   
        this.vx = (nx * u - this.vx) * wallLoss;
        this.vy = (ny * u - this.vy) * wallLoss;
        this.x -= this.vx * time;
        this.y -= this.vy * time;
    },
    collide(b, time) {
        const a = this;
        const m1 = a.m;
        const m2 = b.m;
        const x = a.x - b.x
        const y = a.y - b.y  
        const d = (x * x + y * y);
        const u1 = (a.vx * x + a.vy * y) / d
        const u2 = (x * a.vy - y * a.vx ) / d
        const u3 = (b.vx * x + b.vy * y) / d
        const u4 = (x * b.vy - y * b.vx ) / d
        const mm = m1 + m2;
        const vu3 = (m1 - m2) / mm * u1 + (2 * m2) / mm * u3;
        const vu1 = (m2 - m1) / mm * u3 + (2 * m1) / mm * u1;
        a.x = a.x + a.vx * time;
        a.y = a.y + a.vy * time;
        b.x = b.x + b.vx * time;
        b.y = b.y + b.vy * time;
        b.vx = x * vu1 - y * u4;
        b.vy = y * vu1 + x * u4;
        a.vx = x * vu3 - y * u2;
        a.vy = y * vu3 + x * u2;
        a.x = a.x - a.vx * time;
        a.y = a.y - a.vy * time;
        b.x = b.x - b.vx * time;
        b.y = b.y - b.vy * time;
    },
    doesOverlap(ball) {
        const x = this.x - ball.x;
        const y = this.y - ball.y;
        return  (this.r + ball.r) > ((x * x + y * y) ** 0.5);  
    }       
}

function canAdd(ball) {
    for (const b of balls) {
        if (ball.doesOverlap(b)) {
            return false
        }
    }

    return true;
}

function create(bCount) {
    bCount = 1;
    lines.push(new Line(-10, 10, ctx.canvas.width + 10, 5));
    lines.push((new Line(-10, ctx.canvas.height - 2, ctx.canvas.width + 10, ctx.canvas.height - 10)).reverse());
    lines.push((new Line(10, -10, 4, ctx.canvas.height + 10)).reverse());
    lines.push(new Line(ctx.canvas.width - 3, -10, ctx.canvas.width - 10, ctx.canvas.height + 10)); 

    while (bCount--) {
        let tries = 100;
        debugger

        while (tries--) {
            const dir = Math.rand(0, Math.TAU);
            const vel = Math.rand(velMin, velMax);
            const ball = new Ball(
                Math.rand(maxBallSize + 10, canvas.width - maxBallSize - 10), 
                Math.rand(maxBallSize + 10, canvas.height - maxBallSize - 10),
                Math.cos(dir) * vel,
                Math.sin(dir) * vel,
                Math.rand(minBallSize, maxBallSize),
            )

            if (canAdd(ball)) {
                balls.push(ball);
                break;
            }
        }
    }
}

function resolveCollisions() {
    var minTime = 0, minObj, minBall, resolving = true, idx = 0, idx1, after = 0, e = 0;
        
    while (resolving && e++ < maxResolutionCycles) { // too main ball may create very lone resolution cycle. e limits this
        resolving = false;
        minObj = undefined;
        minBall = undefined;
        minTime = 1;
        idx = 0;

        for(const b of balls) {
            idx1 = idx + 1;
            while (idx1 < balls.length) {
                const b1 = balls[idx1++];
                const time = b.interceptBallTime(b1, after);

                if (time !== undefined) {
                    if (time <= minTime) {
                         minTime = time;
                        minObj = b1;
                        minBall = b;
                        resolving = true;
                    }
                }
            }

            for (const l of lines) {
                 const time = b.interceptLineTime(l, after);
                if (time !== undefined) {
                    if (time <= minTime) {
                        minTime = time;
                        minObj = l;
                        minBall = b;
                        resolving = true;
                    }
                }
            }

            idx++;
        }

        if (resolving) {
            if (minObj instanceof Ball) {
                minBall.collide(minObj, minTime);
            } else {
                minBall.collideLine(minObj, minTime);
            }

            after = minTime;
        }
    }
}

function mainLoop() {
    ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
    resolveCollisions();

    for (const b of balls) {
        b.update()
    }

    ctx.strokeStyle = "#000";
    ctx.beginPath();

    for (const b of balls) {
        b.draw()
    }

    for (const l of lines) {
        l.draw()
    }

    ctx.stroke();
    requestAnimationFrame(mainLoop);
}    

function addBall() {
    numBalls++;
    ballCount.innerHTML = numBalls;
    create(numBalls);
}

mainLoop();

#canvas {
    width: 1000px;
    height: 550px
}

#myConsole {
    background-color: black;
    color: white;
    min-height: 100px;
}

<!DOCTYPE html>
<html lang="en">

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport", content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Christian Davis">
        <link rel="stylesheet" href="styles.css">

        <title>Bouncy Balls</title>
    </head>

    <body>
        <button onclick="addBall()">Add Ball</button><br>
        <div>Ball Count: <span id="ball-count">0</span></div>
        <canvas id="canvas"></canvas>
        <p id="myConsole">&gt;&nbsp;<span id="myMessage"></span></p>

        <script src="app2.js"></script>
    </body>
</html>

Answered By - Dustin Hodges

Read More

Changing three.js background to transparent or other color

Issue

I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck.

My HTML:

<canvas id="canvasColor">

My CSS:

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

As you can see in the following online example I have some animation appended to the canvas, so cant just do a opacity: 0; on the id.

Live preview: http://devsgs.com/preview/test/particle/

Any ideas how to overwrite the default black?

Solution

I came across this when I started using three.js as well. It's actually a javascript issue. You currently have:

// in your three.js init function
renderer.setClearColorHex( 0x000000, 1 );

// => change it to
renderer.setClearColorHex( 0xffffff, 1 );

Update: Thanks to HdN8 for the updated solution:

renderer.setClearColor( 0xffffff, 0);

Update #2: As pointed out by WestLangley in another similar question - you must now use the below code when creating a new WebGLRenderer instance in conjunction with the setClearColor() function:

var renderer = new THREE.WebGLRenderer({ alpha: true });

Update #3: Mr.doob points out that since r78 you can alternatively use the code below to set your scene's background colour:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Answered By - Joe

Read More

How to copy a canvas present on one webpage to another

Issue

I am attempting to get a canvas from a webpage and display it elsewhere. The canvas itself is not obtainable through an url, I get the webpage and grab the canvas from there.

That being said, when attempting to display that same canvas elsewhere, it's blank. I understand that canvases behave differently than other HTML Elements, however I was unable to figure out how to achieve what it is I am trying to do (if possible at all).

I am making a chrome extension and the concerned code is as follows.

service_worker:

chrome.runtime.onMessage.addListener(function(url, _sender, onSuccess) {
    fetch(url)
    .then(response => response.text())
    .then(responseText => onSuccess(responseText))

    return true;
});

Script:

await chrome.runtime.sendMessage(url, response => {
    const responseParsed = domParser.parseFromString(response, 'text/html');

    const graphContainer = responseParsed.getElementsByClassName("chart-container")[0];
    if (graphContainer == undefined) throw Error("Failed to get the graph container");

    parentContainer.insertBefore(graphContainer, parentContainer.childNodes[1])
});

What works:

• I obtain the full webpage and am able to get the chart-container element.

What doesn't:

• When inserting that same graph onto my other webpage, the graph is empty.

Solution

The content of a canvas element is set dynamically by code in the page.

It is not present in the HTML markup for the page, which the posted code obtains and passed through domParser. You can't obtain canvas content using this approach.

You would need access to the live DOM of the page to obtain content of a canvas that wasn't tainted. If the canvas is tainted however, you won't be able to read its content anyway.

Answered By - traktor

Read More

center image in canvas html

Issue

I'm trying to center an svg image in canvas, however the image goes to the right bottom corner, I couldn't understand what I'm doing wrong.

notice: the image is an svg image, I tried a png image it works, however an svg image start the problem.

this is the code I tried

window.addEventListener('load', function () {
     const canvas = document.querySelector('canvas');
     const context = canvas.getContext('2d');
     const CANVAS_WIDTH = (canvas.width = window.innerWidth - 100);
     const CANVAS_HEIGHT = (canvas.height = window.innerHeight - 100);

     class Game {
          constructor(gameWidth, gameHeight) {
               this.width = gameWidth;
               this.height = gameHeight;
               this.image = new Image();
               this.image.src = option.introImage;
               this.centerX = this.width / 2;
               this.centerY = this.height / 2;

               this.x = this.centerX - this.image.width * 0.5;
               this.y = this.centerY - this.image.height * 0.5;
          }

          draw(context) {
               context.drawImage(this.image, this.x, this.y);
          }

          update() {}
     }

     const game = new Game(CANVAS_WIDTH, CANVAS_HEIGHT);

     function animate() {
          game.update();
          game.draw(context);
          requestAnimationFrame(animate);
     }
     animate();
});

Solution

It looks like the issue with your code may be the timing of the image loading and the calculation of its position. When you calculate this.x and this.y in the constructor of your Game class, the image might not have loaded yet, so this.image.width and this.image.height are likely still 0. This means that this.x and this.y are being set to the center of the canvas, which is why the image appears in the bottom right corner once it loads and gets its actual size.

Answered By - sooshyan

Read More

How to convert GDI+ GraphicsPath to HTML5 canvas Path?

Issue

Is there a library that would help to convert GDI+ GraphicsPath to HTML5 canvas Path? Or do I have to manually run through all GraphicsPath.PathPoints and GraphicsPath.PathTypes to emit corresponding HTML5 code (if so please share any hints)?

Solution

Unfortunately I couldn't find anything useful. Some people suggested using SVG as a way to "transport" curves from GDI to Canvas, but I couldn't find any decent SVG library for .NET. It took me quite some time to understand how the data inside GraphicsPath is stored because it is not as straightforward as you might think. This is what I've came up to.

Knowing how GraphicsPath actually work I've managed to recreate it using bunch of HTML5 functions: .moveTo(), .lineTo() and .bezierCurveTo(). The result was pretty neat although final string building takes some time and resulting JS files sometimes contain tenths of thousands lines of code if source GraphicsPath represents long text written with fancy font. Surprisingly Firefox handles them without problems.

I won't paste the code that I'm using as it is nothing special as long as you read and understand my answer from another SO question.

Answered By - SiliconMind

Read More

How do I take code from Codepen, and use it locally?

Issue

How do I take the code from codepen, and use it locally in my text-editor?

http://codepen.io/mfields/pen/BhILt

I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.

<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css"  src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>

I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.

I have also included the jquery library as I understand a lot of the codepen creations use it.

The only console error I'm getting is

Uncaught TypeError: Cannot read property 'getContext' of null

which is linking to my js file, line 4

(function(){

var canvas = document.getElementById( 'animation' ),
    c = canvas.getContext( '2d' ),

Sorry if this is dumb, but I'm new to all this. I'm sure this is basic as hell. Any help would be awesome!

Solution

Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.

Answered By - Álvaro Arranz

Read More

Need pattern for typescript when use useRef

Issue

const CanvasMap = () => {
      const canvasFef = React.useRef<HTMLInputElement>(null)
      useEffect(() => {
        canvasFef && canvasFef.current && cities.forEach(function (item) {
             // logic here
        })
      }, [canvasFef]);
      return (
          <canvas id="canvas"
                  ref={canvasFef}
          ></canvas>
      )
    };

I got error

Property 'getContext' does not exist on type 'HTMLInputElement'

TS2322: Type 'MutableRefObject' is not assignable to type 'LegacyRef'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'HTMLInputElement' is missing the following properties from type 'HTMLCanvasElement': captureStream, getContext, toBlob, toDataURL

Solution

const canvasFef = React.useRef<HTMLCanvasElement | null>(null);

Try this.

Answered By - kyun

Read More

TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'ChartItem'

Issue

I'm working on an Angular dashboard development and I found this error that doesn't let me render area chart

import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
selector: 'app-widget-area',
templateUrl: './area.component.html',
styleUrls: ['./area.component.scss']
})
export class AreaComponent implements AfterViewInit {


 constructor() {}
 ngAfterViewInit() {
    let elem: HTMLElement;
    const ctx = document.getElementById("myChart") as HTMLElement;
     if (ctx) {
        elem = ctx;
        const myChart = new Chart(elem, {
            data: {
                datasets: [
                    { fill: 'origin' },      // 0: fill to 'origin'
                    { fill: '+2' },         // 1: fill to dataset 3
                    { fill: 1 },             // 2: fill to dataset 1
                    { fill: false },         // 3: no fill
                    { fill: '-2' },          // 4: fill to dataset 2
                    { fill: { value: 25 } }    // 5: fill to axis value 25
                ]
            }
        });
    }
}

And got this error:

TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'ChartItem'.
Type 'HTMLElement' is missing the following properties from type 'HTMLCanvasElement': height, width, captureStream, getContext, and 2 more.

I've tried with all the internet stuff and nothing worked for me, anyone have the same error? BTW this is my simply html, I have my NgChartModule from charjs and nothing worked for me

<div>
  <div style="display: block">
  <canvas id="myChart " ></canvas>

  </div>
</div>

Solution

Chart class' constructor take the first parameter (item) as ChartItem type where ChartItem takes type of:

ChartItem: string | CanvasRenderingContext2D | HTMLCanvasElement | { canvas: HTMLCanvasElement } | ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement>

From here, you can see the usage:

const ctx = document.getElementById('myChart');
const ctx = document.getElementById('myChart').getContext('2d');
const ctx = $('#myChart');
const ctx = 'myChart';

const ctx = document.getElementById("myChart");
if (ctx) {
    const myChart = new Chart(ctx, {
            data: {
                datasets: [
                    { fill: 'origin' },      // 0: fill to 'origin'
                    { fill: '+2' },         // 1: fill to dataset 3
                    { fill: 1 },             // 2: fill to dataset 1
                    { fill: false },         // 3: no fill
                    { fill: '-2' },          // 4: fill to dataset 2
                    { fill: { value: 25 } }    // 5: fill to axis value 25
                ]
            }
        });
}

Answered By - Yong Shun

Read More

TypeScript: problems with type system

Issue

I'm just testing typescript in VisualStudio 2012 and have a problem with its type system. My html site has a canvas tag with the id "mycanvas". I'm trying to draw a rectangle on this canvas. Here's the code

var canvas = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);

Unfortunately VisualStudio complains that

the property 'getContext' does no exist on value of type 'HTMLElement'

It marks the second line as an error. I thought this would be merely a warning but the code does not compile. VisualStudio says that

there were build errors. Would you like to continue and run the last successful build ?

I didn't like this error at all. Why is there no dynamic method invocation ? After all the method getContext definitely exists on my canvas element. However I thought this problem would be easy to solve. I just added a type annotiation for canvas:

var canvas : HTMLCanvasElement = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);

But the type system still wasn't satisfied. Here's the new error message, this time in the first line:

Cannot convert 'HTMLElement' to 'HTMLCanvasElement': Type 'HTMLElement' is missing property 'toDataURL' from type 'HTMLCanvasElement'

Well, I'm all out for static typing but this makes the language unusable. What does the type system want me to do ?

UPDATE:

Typescript has indeed no support for dynamic invocation and my problem can be solved with typecasts. My question is basically a duplicate of this one TypeScript: casting HTMLElement

Solution

var canvas = <HTMLCanvasElement> document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

or using dynamic lookup with the any type (no typechecking):

var canvas : any = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

You can look at the different types in lib.d.ts.

Answered By - Markus Jarderot

Read More

Creating a 'New' spiky label with 24 or above point burst

Issue

I am trying to make a point burst thing like the image below:

Currently, I have tried this using pseudo elements, however, I was only able to generate a 12 point burst and does not reflect that which is displayed within the image.

Is there anyway to create a point burst with only a few elements?

Below is the code I have used to attempt this solution:

div{
    width:100px;
    height:100px;
    background:grey;
    transform:rotate(45deg);
    margin:50px;
}
div:after{
    position:absolute;
    content:"";
    background:grey;
    width:100px;
    height:100px;
    transform:rotate(135deg);
}
div:before{
    position:absolute;
    content:"";
    background:grey;
    width:100px;
    height:100px;
    transform:rotate(250deg);
}

<div></div>

Solution

Canvas Approach

You can also achieve this using Canvas. The commands for drawing on Canvas are pretty much the same as in SVG. The approach, on a very high level, would be to find points on two circles (one with radius as x and another with a slightly smaller radius) and then connect them together to form a path. When the path is filled, it gives the appearance of a n-point burst.

In the below diagram, the green circle is the bigger circle with radius as x and the blue circle is the smaller inner circle. By plotting points on the circles and connecting them (with lineTo commands), we get the path which is in red. When this path is filled we get the burst appearance. (Note: The inner and outer circles are only for illustration and are not drawn in the actual diagram).

---

Calculation Logic

• The X and Y coordinates of each points on the circle can be calculated using the below formula:
  • x = (Radius of circle * Cos(Angle in Radians)) + x coordinate of center
  • y = (Radius of circle * Sin(Angle in Radians)) + y coordinate of center
• The angle at which the points are plotted on the circle are determined using the below logic:
  • As used in both your and Persijn's answers, the angle is calculated as (360/no. of bursts). 360 is used because it is the total angle within a circle.
  • Angle of the points on the inner circle should be half way between point1 and point2 on the larger circle and hence a delta is added to it. The delta is half of (360/no. of bursts)
• Angle in Radians = Angle in Degrees * π / 180

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var defaultBurst = 18;
  var defaultContent = "New";

  function paint(numBurst, text) {
    if (!numBurst) numBurst = defaultBurst;
    if (!text) text = defaultContent;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'crimson';
    var angleInRad = Math.PI * (360 / numBurst) / 180;
    var deltaAngleInRad = angleInRad / 2;
    ctx.beginPath();
    ctx.moveTo(75, 150);
    for (i = 0; i <= numBurst; i++) {
      x1 = 75 * Math.cos(angleInRad * i) + 150;
      y1 = 75 * Math.sin(angleInRad * i) + 150;
      x2 = 60 * Math.cos((angleInRad * i) + deltaAngleInRad) + 150;
      y2 = 60 * Math.sin((angleInRad * i) + deltaAngleInRad) + 150;
      ctx.lineTo(x1, y1);
      ctx.lineTo(x2, y2);
    }
    ctx.closePath();
    /* Add shadow only for shape */
    ctx.shadowOffsetX = -5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 5;
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
    ctx.fill();
    ctx.font = "32px Arial";
    ctx.textAlign = "center";
    ctx.fillStyle = "gold";
    /* Nullify shadow for text */
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.fillText(text, 150, 160, 120);
  }
  paint();
  var slider = document.getElementById('burst');
  var textInput = document.getElementById('content');
  slider.addEventListener('change', function() {
    paint(this.value, textInput.value);
  });

  textInput.addEventListener('blur', function() {
    paint(slider.value, this.value);
  });
}

/* For demo only */

.controls {
  float: right;
  padding: 5px;
  margin: 50px 20px;
  line-height: 25px;
  border: 1px solid;
  box-shadow: 1px 1px 0px #222;
}
label,
input {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
h3 {
  padding: 10px;
  text-align: center;
}
label {
  width: 100px;
}
input[type='range'],
input[type='text'] {
  width: 100px;
}
body {
  font-family: Calibri;
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<canvas id='canvas' height='300px' width='300px'></canvas>
<div class='controls'>
  <h3>Controls</h3>

  <label for="burst">Change Burst:</label>
  <input id="burst" class="slider" type="range" value="18" min="12" max="36" step='2' title="Adjust slider to increase or decrease burst" />
  <br/>
  <label for="content">Text Content:</label>
  <input type="text" id="content" maxlength="5" />
</div>

---

Advanced Demo

Check out this CodePen for an advanced demo with features like path creation animation, shadows, control over all the features etc.

---

Usage Advice

If you want a fixed size image somewhere in the page then Canvas is as good as SVG. However, if you would need an image that can be scaled to any size, Canvas is not the right choice because Canvas is raster based and becomes pixelated or blurred when scaled.

If your shape would need a dynamic number of bursts and/or text, Canvas would be more preferable over SVG and CSS because you don't have to perform any DOM manipulations.

Answered By - Harry

Read More

Button generated inside javascript code to onclick insert value in input type text in form

Issue

I have a very nice SEO-keyword suggestion tool working with CKeditor, it displays the most used word in the text while writing. The problem is that I want to make these generated keywords clickable one by one. So when you click on a keyword, it auto-fills an input-type text.

Here is the HTML code:

    <!-- Textarea -->
    <div class="form-group">
    <label class="col-md-2 control-label" for="editor1">Insert your text here </label>
    <div class="col-md-10">                     
    <textarea class="form-control" id="editor1" name="editor1"><p>text example with ahöäåra</p></textarea>
    </div>
    </div>
    <!-- KW density result -->
    <div class="form-group">
    <label class="col-md-2 control-label" for="editor1">Suggested SEO keywords</label>
    <div class="col-md-10">                     
    <div id="KWdensity" ></div>
    </div>
    </div> 

Here is the javascript code:

<script type="text/javascript">
    $(document).ready(function() {
    CKEDITOR.replace('editor1');
    $(initKW);
    CKEDITOR.instances.editor1.on('contentDom', function() {
    CKEDITOR.instances.editor1.document.on('keyup', function(event) {
    $(initKW);
    });
    });
    function KeyDensityShow(srctext, MaxKeyOut, keylenMin) {
    var Output;
    var words = srctext.toLowerCase().split(/[^\p{L}\p{M}\p{N}]+/u)
    var positions = new Array()
    var word_counts = new Array()
    try {
    for (var i = 0; i < words.length; i++) {
    var word = words[i]
    if (!word || word.length < keylenMin) {
    continue
    }
    if (!positions.hasOwnProperty(word)) {
    positions[word] = word_counts.length;
    word_counts.push([word, 1]);
    } else {
    word_counts[positions[word]][1]++;
    }}
    word_counts.sort(function(a, b) {
    return b[1] - a[1]
    })
    return word_counts.slice(0, MaxKeyOut)
    } catch (err) {
    return "";
    }}
    function removeStopWords(input) {
    var stopwords = ['test', ];
    var filtered = input.split(/\b/).filter(function(v) {
    return stopwords.indexOf(v) == -1;
    });
    stopwords.forEach(function(item) {
    var reg = new RegExp('\\W' + item + '\\W', 'gmi');
    input = input.replace(reg, " ");
    });
    return input.toString();
    }
    function initKW() {
    $('#KWdensity').html('');
    var TextGrab = CKEDITOR.instances['editor1'].getData();
    TextGrab = $(TextGrab).text();
    TextGrab = removeStopWords(TextGrab);
    TextGrab = TextGrab.replace(/\r?\n|\r/gm, " ").trim(); 
    TextGrab = TextGrab.replace(/\s\s+/g, " ").trim();
    if (TextGrab != "") {
    var keyCSV = KeyDensityShow(TextGrab, 11, 3);
    var KeysArr = keyCSV.toString().split(',');
    var item, items = '';
    for (var i = 0; i < KeysArr.length; i++) {
    item = '';
    item = item + '<b>' + KeysArr[i] + "</b></button>&nbsp;";
    i++;
    item = '<button class="btn btn-default btn-xs" type="button" onclick="document.getElementById(thebox).value="head of gwyneth paltrow";"><span class="badge">' + KeysArr[i] + "</span>&nbsp;" + item;
    items = items + item;
    }
    $('#KWdensity').html(items);
    }}});
</script>

And here is some extra HTML for the input that needs to be auto-filled.

The keywords box:

 <input type="text" id="thebox" value="" style="width:80%;height:30px;background:#000;color:#fff;"/>
    <br><input type="button" value="this one is working" onclick="document.getElementById('thebox').value='test button is working';">

So if you write something, it will generate keywords buttons. When you click on one of these buttons, the keyword must be entered in the input text like this

keyword,

Here is a Fiddle DEMO.

Any idea how to fix that? I added a document.getElementById('thebox'). but it does not return anything

Solution

Your code in

item = '<button class="btn btn-default btn-xs" type="button" onclick="document.getElementById(thebox).value="head of gwyneth paltrow";"><span class="badge">' + KeysArr[i] + "</span>&nbsp;" + item;

Will add to the DOM (in other words, to the HTML of the page), the following bit:

<button
  class="btn btn-default btn-xs"
  type="button"
  onclick="document.getElementById(thebox).value="head of gwyneth paltrow";"
>

Now, the resulting onclick above has some problems. First, notice that the quotes it uses in the string after .value= are actually closing the onclick declaration because they are not escaped. I mean, instead of

onclick="document.getElementById(thebox).value="head of gwyneth paltrow";"
                                               ^--- problem here       ^--- and here

It should've been

onclick="document.getElementById(thebox).value=\"head of gwyneth paltrow\";"
                                               ^--- fixed here          ^--- and here

Secondly, the argument to .getElementById(thebox) is thebox. Notice here that the way it is now, thebox is actually a variable, not a string. So instead of the above, what you want is:

onclick="document.getElementById(\"thebox\").value=\"head of gwyneth paltrow\";"
                                 ^---    ^--- fixed here

These fixes should be enough to make the clicks on the words set the "head of gwyneth paltrow" value in the textbox.

I believe, though, you want to actually set the key when the button is clicked. To do that, instead of having "head of gwyneth paltrow" after the .value, you should have the text of the key. All in all, here's how that line could be:

item = '<button class="btn btn-default btn-xs" type="button" onclick="document.getElementById(\'thebox\').value=\'' + key + '\';"><span class="badge">' + KeysArr[i] + "</span>&nbsp;" + item;
                                                                                              ^--     ^--       ^^^^^^^^^^^^^^--- changed here (notice in the demo below I declare the key variable before using it here)

Updated fiddle here. Running demo below as well.

$(document).ready(function() {
  CKEDITOR.replace('editor1');
  $(initKW);
  CKEDITOR.instances.editor1.on('contentDom', function() {
    CKEDITOR.instances.editor1.document.on('keyup', function(event) {
      $(initKW);
    });
  });

  function KeyDensityShow(srctext, MaxKeyOut, keylenMin) {
    var Output;
    var words = srctext.toLowerCase().split(/[^\p{L}\p{M}\p{N}]+/u)
    var positions = new Array()
    var word_counts = new Array()
    try {
      for (var i = 0; i < words.length; i++) {
        var word = words[i]
        if (!word || word.length < keylenMin) {
          continue
        }
        if (!positions.hasOwnProperty(word)) {
          positions[word] = word_counts.length;
          word_counts.push([word, 1]);
        } else {
          word_counts[positions[word]][1]++;
        }
      }
      word_counts.sort(function(a, b) {
        return b[1] - a[1]
      })
      return word_counts.slice(0, MaxKeyOut)
    } catch (err) {
      return "";
    }
  }

  function removeStopWords(input) {
    var stopwords = ['test', ];
    var filtered = input.split(/\b/).filter(function(v) {
      return stopwords.indexOf(v) == -1;
    });
    stopwords.forEach(function(item) {
      var reg = new RegExp('\\W' + item + '\\W', 'gmi');
      input = input.replace(reg, " ");
    });
    return input.toString();
  }

  function initKW() {
    $('#KWdensity').html('');
    var TextGrab = CKEDITOR.instances['editor1'].getData();
    TextGrab = $(TextGrab).text();
    TextGrab = removeStopWords(TextGrab);
    TextGrab = TextGrab.replace(/\r?\n|\r/gm, " ").trim();
    TextGrab = TextGrab.replace(/\s\s+/g, " ").trim();
    if (TextGrab != "") {
      var keyCSV = KeyDensityShow(TextGrab, 11, 3);
      var KeysArr = keyCSV.toString().split(',');
      var item, items = '';
      var previousKeys = [];
      for (var i = 0; i < KeysArr.length; i++) {
        item = '';
        var key = KeysArr[i];
        previousKeys.push(key);
        item = item + '<b>' + key + "</b></button>&nbsp;";
        i++;
        item = '<button class="btn btn-default btn-xs" type="button" onclick="document.getElementById(\'thebox\').value=\'' + previousKeys.join(', ') + '\';"><span class="badge">' + KeysArr[i] + "</span>&nbsp;" + item;
        items = items + item;
      }
      $('#KWdensity').html(items);
    }
  }
});

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//cdn.ckeditor.com/4.6.1/standard/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Textarea -->
<div class="form-group">
<label class="col-md-2 control-label" for="editor1">Insert your text here </label>
<div class="col-md-10">                     
<textarea class="form-control" id="editor1" name="editor1"><p>text example with ahöäåra</p></textarea>
</div>
</div>
<!-- KW density result -->
<div class="form-group">
<label class="col-md-2 control-label" for="editor1">Suggested SEO keywords</label>
<div class="col-md-10">                     
<div id="KWdensity" ></div>
</div>
</div> 



The keywords box: <input type="text" id="thebox" value="" style="width:80%;height:30px;background:#000;color:#fff;"/>
<br><input type="button" value="this one is working" onclick="document.getElementById('thebox').value='test button is working';">

Answered By - acdcjunior

Read More

Canvas effects such as filter or drop shadow not applied with context.putImageData

Issue

In a html canvas, I am trying to generate a drop shadow on an image with transparent pieces in it. This image is generated by code and then drawn to the canvas using: ctx.putImageData(dst, 0, 0)

The problem is that the following code is not generating any shadow:

ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 15;
ctx.shadowColor = 'rgba(0,0,0,1)';

ctx.putImageData(dst, 0, 0);

Any help would be appreciated

Solution

ctx.putImageData() will replace the pixels in your context with the ones contained in the ImageData that you puts.
There is no context's property like shadowBlur, nor filter, nor globalCompositeOperation, nor even matrix tranforms that will affect it. Even transparent pixels in your ImageData will be transparent in the context.

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'salmon';
ctx.fillRect(0,0,300,150);

ctx.translate(120, 50);
ctx.rotate(Math.PI/3);
ctx.translate(-25, -25);
ctx.filter = 'blur(5px)';
ctx.globalCompositeOperation = 'lighter';

ctx.fillStyle = '#0000FF';
ctx.fillRect(0,0,50,50);

setTimeout(() => {
  // at this time, all previous filters, transform, gCO are still active 
  const bluerect = ctx.createImageData(50,50);
  const data = new Uint32Array(bluerect.data.buffer);
  data.fill(0xFFFF0000); // blue
  ctx.putImageData(bluerect, 0, 0); // same as our previous fillRect();
  // a transparent ImageData (smaller)
  const transrect = ctx.createImageData(25, 25);
  ctx.putImageData(transrect, 170, 50); // push a bit farther;
}, 1500);

body {
  background: lightblue;
}

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

So, how to deal with an ImageData and still be able to apply the context's properties on it? Go through a second off-screen canvas, on which you will put your ImageData, and that you will then draw on your main canvas. drawImage accepts an HTMLCanvasElement as source, and it is affected by context properties like shadowBlur:

const ctx = canvas.getContext('2d');
ctx.shadowBlur = 12;
ctx.shadowColor = "red";
// our ImageData
const bluerect = ctx.createImageData(50,50);
const data = new Uint32Array(bluerect.data.buffer);
data.fill(0xFFFF0000); // blue
// create a new canvas, the size of our ImageData
const offscreen = document.createElement('canvas');
offscreen.width = bluerect.width;
offscreen.height = bluerect.height;
// put our ImageData on it
offscreen.getContext('2d')
  .putImageData(bluerect, 0, 0);
// draw it on main canvas
ctx.drawImage(offscreen, 50, 50);

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

Now, new browsers have also the ability to do it without the use of a second browser, by generating an ImageBitmap from the ImageData, but this operation is asynchronous, so you may still prefer the old way.

const ctx = canvas.getContext('2d');
ctx.shadowBlur = 12;
ctx.shadowColor = "red";
// our ImageData
const bluerect = ctx.createImageData(50,50);
const data = new Uint32Array(bluerect.data.buffer);
data.fill(0xFFFF0000); // blue

// create an ImageBitmap from our ImageData
createImageBitmap(bluerect)
.then(bitmap => { // later
  ctx.drawImage(bitmap, 50, 50);
});

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

Answered By - Kaiido

Read More

HTML Canvas and fullscreen problems

Issue

• I have been working on an project on github.
  
• I am basically trying to make a carrom game with github pages.
  
• You can check out my project at here.
  
• Well I am just making draw the board on an canvas. As soon a F11 key is pressed everything gets dirty.
  
• You can check the code on github here.

Please Help

ThankYou

Solution

Your resize code doesn't look like it's actually resizing anything or clearing the screen, it's just drawing a different size board onto the canvas whether it fits or not, you can see this if you make the window tiny and then make it large again, there's a small board drawn in the corner. But why bother resizing at all? You have the canvas set at 550x550 in your index file, just swap the board code in your CSS file to something like the below and it will always be a bit smaller than the maximum size that will fit on the screen (which seems to be what you are going for):

position: absolute;
width: 90vmin;
height: 90vmin;
top: 50%;
left: 50%;
margin-top: -45vmin;
margin-left: -45vmin;
background-color: #caa472;

Answered By - ORGPEV

Read More

HTML5: Placing a canvas on a video with controls

Issue

I want to draw things on HTML5 video. For that I am trying to place a canvas on the HTML5 video element.

But there is a problem when I place the canvas on the video element the video controls do not work. Since canvas getting all the mouseover and click events. Is there a way to delegate the events to video controls or show the controls in somewhere else?

Any help/idea would be great.

Solution

What you should do is implement your own controls (or use an existing set such as videojs)
You can read my answer to this question: Html5 video overlay architecture

Answered By - Variant

Read More