31:T4ef,code3 = { const ctx = c3.getContext('2d'); const img = new Image(); let needToRender = true; // draw at least once let aspectRatio = 1; img.onload = function() { aspectRatio = img.naturalWidth / img.naturalHeight; checkRender(); }; img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; // Adapted from https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html function resize() { var width = wr3.clientWidth < img.naturalWidth ? wr3.clientWidth : img.naturalWidth; var height = wr3.clientHeight < img.naturalHeight ? wr3.clientHeight : img.naturalHeight; if (width > height * aspectRatio) { width = height * aspectRatio; } else { height = width / aspectRatio; } if (c3.width != width || c3.height != height) { c3.width = width; c3.height = height; return true; } return false; } function checkRender() { if (resize() || needToRender) { needToRender = false; drawStuff(); } requestAnimationFrame(checkRender); } function drawStuff() { // See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Scaling ctx.drawImage(img, 0, 0, c3.width, c3.height); } }32:T5bf,code4 = { const ctx = c4.getContext('2d'); const img = new Image(); let needToRender = true; // draw at least once let aspectRatio = 1; img.onload = function() { aspectRatio = img.naturalWidth / img.naturalHeight; checkRender(); }; // From https://responsiveimages.org/demos/variable-width/index.html const url = "https://responsiveimages.org/demos/variable-width/img/yacht_race"; const addSuffix = s => url + s; img.src = addSuffix('@fallback.jpg'); img.srcset = [ "@mobile.jpg 320w", "@wide-mobile.jpg 480w", "@tablet.jpg 768w", "@desktop.jpg 1024w", "@hires.jpg 1280w" ] .map(addSuffix) .join(', '); // Adapted from https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html function resize() { var width = wr4.clientWidth; var height = wr4.clientHeight; if (width > height * aspectRatio) { width = height * aspectRatio; } else { height = width / aspectRatio; } if (c4.width != width || c4.height != height) { c4.width = width; c4.height = height; return true; } return false; } function checkRender() { if (resize() || needToRender) { needToRender = false; drawStuff(); } requestAnimationFrame(checkRender); } function drawStuff() { // See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Scaling ctx.drawImage(img, 0, 0, c4.width, c4.height); } }33:Tc90,code5 = { const ctx = c5.getContext('2d'); const img = new Image(); let needToRender = true; // draw at least once let aspectRatio = 1; const sh = 1000; img.onload = function() { aspectRatio = img.naturalWidth / img.naturalHeight; s5.setAttribute('viewBox', `0 0 ${sh * aspectRatio} ${sh}`); drawSvg(); checkRender(); }; // From https://responsiveimages.org/demos/variable-width/index.html const url = "https://responsiveimages.org/demos/variable-width/img/yacht_race"; const addSuffix = s => url + s; img.src = addSuffix('@fallback.jpg'); img.srcset = [ "@mobile.jpg 320w", "@wide-mobile.jpg 480w", "@tablet.jpg 768w", "@desktop.jpg 1024w", "@hires.jpg 1280w" ] .map(addSuffix) .join(', '); // Adapted from https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html function resize() { var width = wr5.clientWidth; var height = wr5.clientHeight; if (width > height * aspectRatio) { // Don't forget to force dimensions to be integers, or you will loop here width = Math.floor(height * aspectRatio); } else { height = Math.floor(width / aspectRatio); } if (c5.width != width || c5.height != height) { c5.width = width; c5.height = height; s5.setAttribute('width', width); // As an alternative: don't set the attribute, just set CSS to 100% s5.setAttribute('height', height); return true; } return false; } function checkRender() { if (resize() || needToRender) { needToRender = false; drawStuff(); } requestAnimationFrame(checkRender); } function drawStuff() { // See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Scaling ctx.drawImage(img, 0, 0, c5.width, c5.height); } function addPoint(parent, p) { const point = document.createElementNS(parent.namespaceURI, "circle"); point.setAttributeNS(null, "cx", p[0]); point.setAttributeNS(null, "cy", p[1]); // circle size is expressed in the viewBox dimensions (eg. viewBox height is 1000) point.setAttributeNS(null, "r", 20); parent.appendChild(point); } function addPath(parent, points) { const p = document.createElementNS(parent.namespaceURI, "path"); const d = `M ${points[0][0]},${points[0][1]} ${points .slice(1) .map(po => `L ${po[0]},${po[1]}`) .join(' ')}`; p.setAttributeNS(null, "d", d); parent.appendChild(p); } function addText(parent, x, y, text) { const t = document.createElementNS(parent.namespaceURI, "text"); t.setAttributeNS(null, "x", x); t.setAttributeNS(null, "y", y); t.textContent = text; parent.appendChild(t); } function drawSvg() { const oldg = s5.getElementById("points"); if (oldg) s5.removeChild(oldg); const g = document.createElementNS(s5.namespaceURI, "g"); g.setAttributeNS(null, "id", 'points'); s5.appendChild(g); // y is between 0 and 1000 // x depends on the aspectRatio const points = [[425, 485], [623, 488], [935, 500]]; addPath(g, points); for (const p of points) { addPoint(g, p); } addText(g, 935, 460, "last mast"); } }34:Td49,code6 = { const ctx = c6.getContext('2d'); const img = new Image(); let needToRender = true; // draw at least once let aspectRatio = 1; const sh = 1000; img.onload = function() { aspectRatio = img.naturalWidth / img.naturalHeight; checkRender(); }; // From https://responsiveimages.org/demos/variable-width/index.html const url = "https://responsiveimages.org/demos/variable-width/img/yacht_race"; const addSuffix = s => url + s; img.src = addSuffix('@fallback.jpg'); img.srcset = [ "@mobile.jpg 320w", "@wide-mobile.jpg 480w", "@tablet.jpg 768w", "@desktop.jpg 1024w", "@hires.jpg 1280w" ] .map(addSuffix) .join(', '); // Adapted from https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html function resize() { var width = wr6.clientWidth; var height = wr6.clientHeight; if (width > height * aspectRatio) { // Don't forget to force dimensions to be integers, or you will loop here width = Math.floor(height * aspectRatio); } else { height = Math.floor(width / aspectRatio); } if (c6.width != width || c6.height != height) { c6.width = width; c6.height = height; s6.setAttribute('width', width); // As an alternative: don't set the attribute, just set CSS to 100% s6.setAttribute('height', height); s6.setAttribute('viewBox', `0 0 ${width} ${height}`); return true; } return false; } function checkRender() { if (resize() || needToRender) { needToRender = false; drawStuff(); drawSvg(); } requestAnimationFrame(checkRender); } function drawStuff() { // See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Scaling ctx.drawImage(img, 0, 0, c6.width, c6.height); } function addPoint(parent, p, scale) { const point = document.createElementNS(parent.namespaceURI, "circle"); point.setAttributeNS(null, "cx", p[0] * scale); point.setAttributeNS(null, "cy", p[1] * scale); // circle size is expressed in the CSS px point.setAttributeNS(null, "r", 5); parent.appendChild(point); } function addPath(parent, points, scale) { const p = document.createElementNS(parent.namespaceURI, "path"); const d = `M ${points[0][0] * scale},${points[0][1] * scale} ${points .slice(1) .map(po => `L ${po[0] * scale},${po[1] * scale}`) .join(' ')}`; p.setAttributeNS(null, "d", d); parent.appendChild(p); } function addText(parent, x, y, text, scale) { const t = document.createElementNS(parent.namespaceURI, "text"); t.setAttributeNS(null, "x", x * scale); t.setAttributeNS(null, "y", y * scale); // dy is expressed in the CSS px t.setAttributeNS(null, "dy", -10); t.textContent = text; parent.appendChild(t); } function drawSvg() { const scale = s6.height.baseVal.value / sh; const oldg = s6.getElementById("points"); if (oldg) s6.removeChild(oldg); const g = document.createElementNS(s6.namespaceURI, "g"); g.setAttributeNS(null, "id", 'points'); s6.appendChild(g); // y is between 0 and 1000 // x depends on the aspectRatio const points = [[425, 485], [623, 488], [935, 500]]; addPath(g, points, scale); for (const p of points) { addPoint(g, p, scale); } addText(g, 935, 500, "last mast", scale); } }35:[] 2f:{"title":"Sizes of canvas, images and SVG","cells":[{"id":0,"value":"md`# Sizes of canvas, images and SVG\n\nSome techniques to manage the size of canvas, image embedded in canvas and SVG.\n\n## Canvas\n\nWe create a canvas element (blue background) with 100% CSS width and height:\n\\`\\`\\`html\n

\n\\`\\`\\`\n\nThe canvas is embedded in a container (dashed border) that can be resized with the sliders.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof w1 = w()","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof h1 = h()","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"co1 = html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"c1 = co1.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"{\n w1; // to force evaluation if w1 has changed\n h1; // to force evaluation if h1 has changed\n return md`The canvas uses all the available space inside the container, and its dimensions on the screen are:\n\n- \\`clientWidth\\`: ${c1.clientWidth}\n- \\`clientHeight\\`: ${c1.clientHeight}\n\nIts own coordinates space is:\n\n- \\`width\\`: ${c1.width}\n- \\`height\\`: ${c1.height}\n\nThese coordinates space dimensions are not affected by the container size and will not be modified by resize events _(try moving the sliders)_.\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`## Image inside the canvas\n\nWe add an image to the canvas using JavaScript (expand the second image cell to see the code).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof w2 = w()","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"viewof h2 = h()","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"co2 = html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"c2 = co2.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"i2 = {\n var ctx = c2.getContext('2d');\n var img = new Image();\n img.onload = function() {\n ctx.drawImage(img, 0, 0);\n };\n img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`The image natural dimensions are:\n\n- \\`naturalWidth\\`: ${i2.naturalWidth}\n- \\`naturalHeight\\`: ${i2.naturalHeight}\n\nwhereas the canvas viewport dimensions are\n\n- \\`width\\`: ${c2.width}\n- \\`height\\`: ${c2.height}\n\nThe image fills the ${c2.width}px width exactly and is \"cut\" at ${c2.height}px height.\n\nWhen the container size changes, the canvas pixels, and thus the image painted on it, are stretched.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`## Canvas as \\`object-fit: scale-down\\`\n\nWe imitate the [\\`object-fit: scale-down\\`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property: the canvas includes the exact entire image, respecting its aspect ratio and maximum size, and will be scaled down if the container gets smaller.\n\nNote that we require an intermediate div wrapper (green background) to compute the dimensions.\n\n\\`\\`\\`html\n

\n\\`\\`\\`\n\nThe canvas dimensions are computed on every animation frame, and the canvas is resized only when needed. [This technique](https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html) does not require listening to resize events.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof w3 = w()","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"viewof h3 = h()","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"co3 = html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"wr3 = co3.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"c3 = wr3.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"md`## Canvas as \\`object-fit: contain\\` on responsive image\n\nThe background image may be replaced with a responsive image ([\\`srcset\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) attribute) and the code remains the same. But here we adapt it to show how to compute the canvas width and height to imitate the \\`object-fit: contain\\` behavior.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"viewof w4 = w()","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"viewof h4 = h()","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"co4 = html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"wr4 = co4.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"c4 = wr4.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`## SVG on top of canvas\n\nLet's now add an SVG layer on top of the canvas.\n\n\\`\\`\\`html\n

\n \n

\n\\`\\`\\`\n\nWe require two wrapper \\`

\\`'s:\n\n- \\`wr5\\` to compute the height and width (green background) \n- \\`wa5\\` to position the SVG on top of the canvas (red background) \n\n### Relative-size SVG elements\n\nThe SVG viewBox is set to a fixed value: we chose to set viewBox height to 1.000, and let the width adapt to the image aspect ratio. This way, the coordinates referential only depends on the aspect ratio, and is not affected if a lower or higher resolution image is loaded. The SVG width and height are updated if needed on every animation frame.\n\nNote that the circles are proportional to the canvas size, as if they were part of the image. See the next section for a constant size symbols.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"viewof w5 = w()","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"viewof h5 = h()","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"co5 = html`\n

\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"wr5 = co5.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"wa5 = wr5.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"c5 = wa5.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"s5 = wa5.children[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"md`### Fixed-size SVG elements\n\nIn the previous section, the SVG symbols were scaled to the image size. Here we want them to have a fixed size to use them as a user interface, eg. drag&drop. The SVG viewBox is thus computed on every container resizing, and the SVG is redrawn with positions adapted to the new scale.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"viewof w6 = w()","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"viewof h6 = h()","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"co6 = html`\n

\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"wr6 = co6.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"wa6 = wr6.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"c6 = wa6.children[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"s6 = wa6.children[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"md`## Next\n\n- zoom\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`\n## References\n\n- https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html\n- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images\n- https://responsiveimages.org/demos/variable-width/index.html\n- https://threejsfundamentals.org/threejs/lessons/threejs-responsive.html\n\n## Credits\n\nProject developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\n---\n\n_boring zone_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"w = () =>\n slider({\n min: 0,\n max: 100,\n step: 1,\n value: init.width,\n format: v => `${v}%`,\n description: \"Container width\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"h = () =>\n slider({\n min: 0,\n max: 100,\n step: 1,\n value: init.height,\n format: v => `${v}%`,\n description: \"Container height\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"init = ({\n width: 90,\n height: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"src = 'https://raw.githubusercontent.com/severo/pictures/master/images/petanque.jpg'","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"import { button, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}