HTML5-Canvas | HTML5 tutorial about Canvas Three.js | Canvas library

Make the following changes.

At top of code (very first line) add the directive "use strict"; This would have throw an error where the problem is.

In the while loop you have

Im found another FFmpeg config that works perfectly.

You could put a div behind each hole and play around with the inset shadows in those to get a suitable effect (though the simple shadow in this snippet makes it look more like a button sticking out rather than a hole in I realize)

Rectangles are convex polygons.

Rectangle and marquee each have 4 points (corners) that define 4 edges (lines segments) connecting the points.

This solution works for all convex irregular polygons with 3 or more sides.

Points and edges must be sequential either Clockwise CW of Count Clockwise CCW

If any point of one poly is inside the other polygon then they must overlap. See example function isInside

To check if point is inside a polygon, get cross product of, edge start to the point as vector, and the edge as a vector.

If all cross products are >= 0 (to the left of) then there is overlap (for CW polygon). If polygon is CCW then if all cross products are <= 0 (to the right of) there is overlap.

It is possible to overlap without any points inside the other poly.

If any of the edges from one poly crosses any of the edges from the other then there must be overlap. The function doLinesIntercept returns true if two line segments intercept.

Function isPolyOver(poly1, poly2) will return true if there is overlap of the two polys.

A polygon is defined by a set of Point's and Lines's connecting the points.

The polygon can be irregular, meaning that each edge can be any length > 0

Do not pass polygons with an edge of length === 0 or will not work.

I added the function Rectangle.toPoints that transforms the rectangle and returning a set of 4 points (corners).

Example is a copy of your code working using the above methods.

You can try this.

As a quick and dirty solution:

• Add ctx.save(); to the beginning of the trackTransforms() function definition.
• Add ctx.restore(); ctx.save(); to the beginning of the resetCanvas() function definition.

Canvas resolution, measured in pixels, and canvas page size, measured in CSS pixels, are independent.

When using the 2D API rendering is done in canvas pixels (not CSS pixels)

The mouse event holds coordinates as CSS pixels and as such will not always directly translate to canvas pixel coordinates.

One can get the page size of the canvas using getBoundingClientRect which can be used to scale from CSS pixels to canvas pixels.

However getBoundingClientRect includes the element's padding and border which must also be considered when scaling the CSS pixels to canvas pixels.

^{Note in my comments I talked about the device pixel ratio. I was wrong in my assessment of it's use, it is not required in this situation}

The example uses a default canvas (300 by 150px) and then uses CSS rules to scale it to the page, adding padding and a border in units other than CSS pixels. The canvas is also scaled such that it can be scrolled up and down.

Switch between the full page and snippet to see how scaling effects the example.

The function getInnerRect uses getBoundingClientRect and getComputedStyle to get the bounds of the canvas on the page in CSS pixels. From the top left of the top left pixel on the canvas to the bottom right of the bottom right most pixel.

The draw function then uses the inner rect (named bounds in example) to calculate the scales (x, y). Then offsets the mouse coordinates and scales them to draw to the canvas.

• Note That the function mouseEvent captures the mouse coordinates from event.pageX and event.pageY

• Note The function getBoundingClientRect is relative to the page scroll position. Thus when using it's return one must adjust the coordinates to take in acount the page scroll position. The example uses scrollX and scrollY to do this.

• Note that the scale and offset can also be encapsulated as a 2D transformation. As the coordinates in the example will only change when the page is resized the transform can be calculated once on resize and applied to the canvas. Thus the draw function can use the CSS pixels to render directly to the canvas. This make the code in the example a little simpler. (See second snippet);

• Note That because the transform will transform all rendering sizes it is necessary to compute the inverse scale of the transform. This is used to scale the line width in the second example. If this is not done then the line width rendered will change as the page size changes.

Your call to $(svgDoc) won't wrap the correct element.

To get it, you would need to do $("svg", svgDoc) so it uses the correct document context and search for the correct element.

I think you need to use the ratio pretty much everywhere, example: