ericdrowell/concrete

A lightweight Html5 Canvas framework that enables hit detection, layer support, pixel ratio management, exports, and downloads

Concrete

Concrete is a lightweight, fast Html5 Canvas framework that enables hit detection, layering, multi-buffering for lightning fast performance, pixel ratio support, and download support

As the creator of KineticJS, author of HTML5 Canvas Cookbook, founder of HTML5CanvasTutorials.com, founder of MeteorCharts, and the principal data visualization engineer at Platfora and Workday, I've identified a handful of features that just about every HTML5 Canvas project needs. Concrete packages up these features into a lightweight framework of about 600 lines of JavaScript, including documentation.

Examples & Documentation

Head on over to the main website http://www.concretejs.com.

concrete's Issues

What the point and use to the Hit ?

I'm trying to figure what the use of Concrete.hit. I wonder if it to hover or click in the layer, but in your exemple, you do it, in the hoveredLayer. If the Hit its for, if the pointer is hover in the Layer, why you have a HoveredLayer ? and why you need to have a MainLayer, HoveredLayer and use the MainLayer.hit ...
Please, i'm lost whithout ideas because the documentation doesn't explicit.
In the exemple the hit, draw the same of mainLayer and nothing more.
Can you explain to me plz ?

getIntersection broken on Safari iOS10 iPad (not tested with concrete)

Just want to inform you.
We had a problem with kineticjs which might be in concrete too.

best regards Tobias & Dennis from SinusQuadrat

getImageData gives back wrong colors in Safari iOS10 iPad. (Tested on an early iPad Air)
Colors values higher than 240 differ 1 from the originaly set value. This breaks the function of hitCanvas and colorIndex / coloKey and getIntersection.

Our solution in kineticjs is to use ios save colors for identifiers:

getRandomColor: function(iosSave) {
    var randColor;
    if(iosSave){
        randColor = (Math.random() * 0xadcea0 << 0).toString(15);
    }else{
        randColor = (Math.random() * 0xFFFFFF << 0).toString(16);
    }
    while (randColor.length < 6) {
        randColor = ZERO + randColor;
    }
    return HASH + randColor;
}

to test independet (canvas in html needed, loggs differing values):

dndcanvas = document.getElementById("dndcanvas");
var ctx = dndcanvas.getContext('2d');
ctx.clearRect(0, 0, dndcanvas.width, dndcanvas.height);

for (var i = 0; i <= 255; i++) {
    ctx.fillStyle = 'rgb(230,230,' + i + ')';
    ctx.fillRect(i, canvasObj.y-35, 1, 1);
    var p = ctx.getImageData(i, canvasObj.y-35, 1, 1).data;
    if (i != p[2]) {
        console.log(p[2]);
    }
}

layer context transform / scale don't seem to work

I've created simple example below to test how certain transformations work on layers, demo is available at https://codesandbox.io/s/cool-varahamihira-i2vvd?file=/src/index.js:0-403

I might be missing something, but as far as I can tell that scale transform should work, yet no difference in display is visible with it added or removed.

import Concrete from "concretejs";

const viewport = new Concrete.Viewport({
  container: document.getElementById("app"),
  width: 500,
  height: 500
});

const layer = new Concrete.Layer();

viewport.add(layer);

const context = layer.scene.context;

context.fillRect(10, 10, 100, 100);
context.fillRect(110, 110, 100, 100);
context.fillRect(10, 210, 100, 100);
context.scale(2, 2); // Doesn't seem to work

viewport.render();

Remove reference to window inside of the IFFE

concrete/src/concrete.js

Line 4 in 427ae6c

Concrete.PIXEL_RATIO = (function () {

Currently, we check pixel ration in an IFFE. However, it doesn't protect against the window var in SSR situations. Attempting to import concrete anywhere in the dependency tree will result in the error:

ReferenceError: window is not defined
    at Object../node_modules/concretejs/build/concrete.min.js
      (/usr/src/node_modules/elgrapho/engine/dist/ElGrapho.min.js:28:53354)

Fix is similar to a UMD harness:

Concrete.PIXEL_RATIO = (function (win) {
  return (win && win.devicePixelRatio) || 1;
})(typeof window !== 'undefined' ? window : null);

Why Concrete.Scene.setSize() sets this.id ?

Why Concrete.Scene.setSize() sets his id property while id is already defined in Concrete.Scene constructor ?

concrete/src/concrete.js

Line 327 in 35f870e

this.id = idCounter++;

Is this an oversight?

Your website (concretejs.com) is hacked

If you come from Google you get redirected to some viagra scam

Just letting you know

window.devicePixelRatio changes on zoom but is only read once on load, is this intended?

window.devicePixelRatio changes on zoom but is only read once on load, is this intended?

expectation

As far as I understand, it is used to maintain a high resolution even if the device independent pixels are larger then the physical ones, thus I'd expect that the scalings that are done in setSize need to be adjusted then the window.devicePixelRatio changes.

actual behavior

Only the initial zoom on page load is considered .

problems

I'm unsure what would happen to Hit.getIntersection(x,y) using webgl, when the Concrete.PIXEL_RATIO would change but Hit.setSize(w,h) hasn't been called before, but if I understand it right this function will anyways fail if Concrete.PIXEL_RATIO isn't an integer and that is only given for zoom factors multiple of 100%.

getIntersection gives wrong key due to anti-aliasing

When you draw an arc (circle) as hitbox, you'll notice that at the boundary it's possible for getIntersection to return the wrong key.

I'm assuming this has to do with anti-aliasing, where additional pixels with different colors are added by the browser to smooth the arc.

Maybe the color check could be expanded to make sure at least three neighboring pixels (out of a 3x3 square) have the same color?

Hit.getIntersection() context.getImageData() recently changed in Brave Browser

Example in Brave, which broke hit detection. Not sure if a bug with Brave or if a new parameter is needed to set up the context.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

also tried var ctx = c.getContext("2d", { preserveDrawingBuffer: true, antialias: false, });

Expect ctx.getImageData(30, 30, 1, 1) to return Uint8ClampedArray(4) [255, 0, 0, 255]
But got data: Uint8ClampedArray(4) [254, 1, 0, 255]

Other variations:
ctx.getImageData(30, 30, 10, 10)
data: Uint8ClampedArray(400) [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 1, 0, 255, 255, 1, 1, 255, 255, 0, 1, 255, 255, 0, 0, 255, 254, 0, 0, 255, 254, 1, 0, 255, 255, 1, 0, 255, 255, 0, 1, 255, 255, 0, 1, 255, 255, 1, 1, 255, 255, 0, 1, 255, 255, 1, 0, 255, 255, 1, 1, 255, 255, 0, 1, 255, 254, 0, 1, 255, 255, 0, 1, 255, 254, 1, 1, 255, 254, 0, 1, 255, 255, 0, 1, 255, 255, 0, 0, 255, 255, 0, 1, 255, 255, 0, 1, 255, …]

ctx.getImageData(30, 30, 5, 5)
ImageData {data: Uint8ClampedArray(100), width: 5, height: 5}
data: Uint8ClampedArray(100) [254, 1, 0, 255, 255, 0, 1, 255, 255, 1, 0, 255, 254, 0, 0, 255, 255, 1, 0, 255, 254, 1, 1, 255, 255, 1, 0, 255, 255, 0, 0, 255, 254, 1, 1, 255, 255, 0, 0, 255, 254, 1, 0, 255, 254, 1, 1, 255, 254, 1, 0, 255, 255, 0, 1, 255, 254, 1, 1, 255, 254, 0, 0, 255, 255, 0, 0, 255, 254, 1, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 254, 0, 1, 255, 254, 0, 1, 255, 255, 0, 1, 255, 255, 1, 1, 255, 255, 1, 1, 255]

ctx.getImageData(30, 30, 1, 4)
ImageData {data: Uint8ClampedArray(16), width: 1, height: 4}
data: Uint8ClampedArray(16) [254, 0, 0, 255, 254, 1, 0, 255, 254, 1, 0, 255, 255, 0, 1, 255]

ctx.getImageData(30, 30, 1, 3)
ImageData {data: Uint8ClampedArray(12), width: 1, height: 3}
data: Uint8ClampedArray(12) [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255]

What is the point of setPosition

I can not identify any meaning logic relation to setPosition
Is there anything yet to be implemented?

Adding Hit to DOM

It seemed to me that adding the Hit canvas to the DOM is not actually required.

Concrete.Layer line 180
this.container.appendChild(this.hit.canvas);

If the above line is commented out, the three circles example works as expected.
By not adding this to the DOM it would seem that DOM performance may be improved, even thought the style is set to display = 'none'.

If this is not the case, please explain.

Scrolling a layer?

How would you scroll a layer such as a map?

For example, this is what I'm trying to do for a game: Create a layer that I want to use for a map. The map will be very large and will not fit into the viewport. When the user moves to the edge of the viewport, I want to scroll the map in the appropriate direction.

Is this possible with Concrete? If so, could you show me a short example?

Thanks!

Here's a small proof of concept I'm doing: https://geoquest-beta.danmonroe.dev/
The ship is the "player" Currently move by clicking the mouse on a target (water). It does the appropriate path finding.

Please compare to KineticJS

Why would I use one vs the other, thanks!