2b:null 2c:["$","title",null,{"children":"Canvas | Anders | Observable"}] 31:T50b,canvas8 = { const WIDTH = width const HEIGHT = width / 2 const context = DOM.context2d(WIDTH, HEIGHT) // projection const projection = d3.geoEqualEarth() // créateur d'attribut "d" pour en svg const pathCreator = d3.geoPath().projection(projection) // dessiner les côtes en bleu const drawCoast = collection => { const d = pathCreator(collection) // attribut "d" pour const path = new Path2D(d) // transformer un "d" en svg à un chemin en canvas context.strokeStyle = 'LightBlue' context.lineWidth = 50 context.lineJoin = 'round' context.stroke(path) // dessiner le chemin } // passer la collection GeoJSON à "drawCoast" drawCoast(PAYS) // dessiner chaque pays en vert avec un contour blanc const drawCountry = feature => { const d = pathCreator(feature) // attribut "d" pour const path = new Path2D(d) // transformer un "d" en svg à un chemin en canvas context.fillStyle = 'DarkSeaGreen' context.fill(path) // dessiner l'interieur en vert context.strokeStyle = 'white' context.lineWidth = 0.5 context.stroke(path) // dessiner le contour blanc } // passer chaque "Feature" GeoJSON à "drawCountry" PAYS.features.forEach(drawCountry) return context.canvas }32:[] 2f:{"id":"453dece6bb2aebac","slug":"canvas","title":"Canvas","thumbnail":"4713d9b5f6d2fab70952e6adeddcd2b8956a0ea18c2d40bab8380acdcd7c9ed7","access_level":"public","create_time":"$D2019-04-24T06:03:46.080Z","update_time":"$D2021-04-30T06:15:46.022Z","view_time":null,"first_public_time":"$D2019-04-24T16:18:20.774Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"185626bcadc26005","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":"starter_2024"},"version":388,"publish_version":388,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null}],"members":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"04f4b394708037c7","slug":"heig-visdom-2020","title":"HEIG-visdom-2020","owner":{"id":"185626bcadc26005","login":"idris-maps","name":"Anders"}},"type":"notebook","body":{"title":"Canvas","cells":[{"id":0,"value":"md`# Canvas\n\n\nArticle et tutoriel sur [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"canvasExample","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"md`## Le contexte 2d\n\nPour dessiner sur un élément HTML **canvas**, nous devons avoir accès à son **contexte**. Supposons que nous avons un élément canvas avec un id **dessin**:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"code(`\n const canvas = document.getElementById('dessin') // l'élément\n\n // définir la taille du canvas\n const WIDTH = 1000\n const HEIGHT = 500\n canvas.setAttribute('width', WIDTH)\n canvas.setAttribute('height', HEIGHT)\n\n const context = canvas.getContext('2d') // le contexte\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"md`Nous utiliserons une série de fonctions sur le **contexte** pour dessiner.\n\nAttention dans les exemples ci-dessous, nous utilisons une fonction spécifique à **Observable** pour accéder au contexte: **DOM.context2d()**. Celle-ci n'existera pas dans votre page web, il faut utiliser la méthode ci-dessus.\n\nQuand vous utilisez **canvas** sur votre propre site, vous pouvez ignorer le début des exemples:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":368,"value":"code(`\n const WIDTH = width\n const HEIGHT = width / 4\n const context = DOM.context2d(WIDTH, HEIGHT)\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"md`et la fin:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"code(`\n return context.canvas\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`## Rectangles\n\nLa fonction **.fillRect()** crée un rectangle remplis. **.strokeRect()** dessine le contour d'un rectangle. **.clearRect()** efface un rectangle du canvas.\n\nLes trois prennent 4 arguments:\n\n- position x du coin en haut à gauche\n- position y du coin en haut à gauche\n- largeur du rectangle\n- hauteur du rectangle\n\nPour **.fillRect()**, il faut définir la couleur avant de dessiner avec **.fillStyle**. La couleur du contour est définie avec **.strokeStyle** avant d'utiliser **.strokeRect()**.\n\n[MDN - Drawing rectangles](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_rectangles)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"canvas1 = {\n const WIDTH = width\n const HEIGHT = width / 4\n const context = DOM.context2d(WIDTH, HEIGHT)\n \n // un rectangle rouge\n context.fillStyle = 'indianred'\n context.fillRect(0, 0, WIDTH / 2, HEIGHT / 2)\n \n // un rectangle avec un contour bleu\n context.strokeStyle = 'steelblue'\n context.strokeRect(WIDTH / 4, HEIGHT / 3, WIDTH / 2, HEIGHT / 2)\n \n // un rectangle qui efface une supérficie\n context.clearRect(20, 20, WIDTH / 5, HEIGHT / 5)\n \n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`## Arcs\n\n[MDN - Arc](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc)\n\n**.arc()** prends les arguments:\n\n- x du centre de l'arc\n- y du centre de l'arc\n- le rayon\n- l'angle de départ\n- l'angle d'arrivée\n\nDans l'exemple ci-dessous, x et y sont le centre du canvas. Changez les valeurs des trois autres attributs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"md`Rayon: ${rayon}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"viewof rayon = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"md`Angle de départ: ${angleDeDepart}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"viewof angleDeDepart= html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"md`Angle d'arrivée: ${angleDArrivee}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"viewof angleDArrivee = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"canvas3 = {\n const WIDTH = width\n const HEIGHT = width / 4\n const context = DOM.context2d(WIDTH, HEIGHT)\n const center = { x: WIDTH / 2, y: HEIGHT / 2 }\n \n // un cercle jaune fixe\n context.beginPath()\n context.arc(center.x, center.y, HEIGHT / 3, 0, Math.PI * 2)\n context.fillStyle = 'gold'\n context.fill()\n \n // un arc où le rayon et l'angle d'arrivée sont le résultat des \"sliders\" plus haut\n context.beginPath()\n context.arc(WIDTH / 2, HEIGHT / 2, rayon, angleDeDepart, angleDArrivee)\n context.lineWidth = 5\n context.stroke()\n \n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`## Formes complexes\n\nComme avec l'élément **path** et son attribut **d** en **SVG**, nous pouvons décrire le chemin pour dessiner une forme sur le **canvas**. Pour cela nous utilisons des fonctions sur le **contexte** comme **.moveTo()** et **.lineTo()**. \n\n[MDN - Drawing paths](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"canvas2 = {\n const WIDTH = width\n const HEIGHT = width / 4\n const context = DOM.context2d(WIDTH, HEIGHT)\n \n // décrire le tracé\n context.moveTo(WIDTH / 2, 0)\n context.lineTo(WIDTH, HEIGHT)\n context.lineTo(0, HEIGHT)\n context.quadraticCurveTo(WIDTH / 2, HEIGHT / 2, WIDTH / 2, 0)\n \n // remplir\n context.fillStyle = 'lightblue'\n context.fill()\n \n // contour\n context.strokeStyle = 'steelblue'\n context.stroke()\n \n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"md`## Path2D pour utiliser un chemin SVG\n\nIl est possible de décrire le tracé sur **canvas** avec l'attribut **d** de l'élément svg **path**.\n\nIci le chemin est créé avec **Path2D** et passé aux fonctions **.fill** et **.stroke** du contexte. Comparez à l'exemple ci-dessus où le chemin est décris en premier et rien n'est passé aux fonctions **.fill** et **.stroke**.\n\n[MDN - Path2D](https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"canvas4 = {\n const WIDTH = width\n const HEIGHT = width / 4\n const context = DOM.context2d(WIDTH, HEIGHT)\n \n // un chemin SVG (le même que dans l'example ci-dessus)\n const d = `\n M ${WIDTH / 2}, 0\n L ${WIDTH}, ${HEIGHT}\n L 0, ${HEIGHT}\n Q ${WIDTH / 2}, ${HEIGHT / 2}, ${WIDTH / 2}, 0\n Z`\n \n // converti en chemin CANVAS\n const path = new Path2D(d)\n \n // remplir\n context.fillStyle = 'lightblue'\n context.fill(path) // <-- \"path\" doit être passé ici \n \n // contour\n context.strokeStyle = 'steelblue'\n context.stroke(path) // <-- \"path\" doit être passé ici \n \n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"md`## Textes\n\n[MDN - Drawing text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"canvas5 = {\n const WIDTH = width\n const HEIGHT = width / 4\n const context = DOM.context2d(WIDTH, HEIGHT)\n \n // le centre du canvas\n const center = { x: WIDTH / 2, y: HEIGHT / 2 }\n \n // \"Salut\" en haut à gauche\n context.font = '48px serif'\n context.fillText('Salut', 10, 50)\n \n // la ligne rouge au centre\n context.moveTo(center.x, 0)\n context.lineTo(center.x, HEIGHT)\n context.strokeStyle = 'indianred'\n context.stroke()\n \n // le style des textes au centre\n context.font = '20px sans'\n context.strokeStyle = 'steelblue'\n \n // les différents alignements\n context.textAlign = 'start'\n context.strokeText('text-align=start', center.x, center.y - 20)\n context.textAlign = 'center'\n context.strokeText('text-align=center', center.x, center.y)\n context.textAlign = 'end'\n context.strokeText('text-align=end', center.x, center.y + 20)\n \n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"md`## Images\n\n**.drawImage** prends 5 arguments\n\n- l'image\n- position x du point en haut à gauche\n- position y du point en haut à gauche\n- largeur\n- hauteur\n\n[MDN - Using images](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"canvas6 = {\n const WIDTH = width\n const HEIGHT = width / 4\n const context = DOM.context2d(WIDTH, HEIGHT)\n \n // Créer une image\n var img = new Image()\n\n // Ajouter la source\n img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'\n\n // Utiliser l'image une fois qu'elle est chargée\n img.addEventListener('load', () => {\n context.drawImage(img, 0, 0, 300, 150)\n context.drawImage(img, 350, 100, 100, 100)\n }, false)\n\n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"md`## Styles et couleurs\n\nPour plus de détails pour les styles dans **canvas**: [MDN - Applying styles and colors](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":190,"value":"md`## Graphique avec D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"VILLES = [\n { nom: 'Lausanne', population: 138905 },\n { nom: 'Yverdon-les-Bains', population: 30143 },\n { nom: 'Montreux', population: 26574 },\n { nom: 'Renens', population: 21036 },\n { nom: 'Nyon', population: 20533 },\n { nom: 'Vevey', population: 19827 },\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"canvas7 = {\n const WIDTH = width\n const HEIGHT = width / 4\n const BAR_WIDTH = WIDTH / VILLES.length\n const MARGIN = 5\n const context = DOM.context2d(WIDTH, HEIGHT)\n \n // l'échelle pour la hauteur (seule fonction D3 utilisée)\n const heightScale = d3.scaleLinear()\n .domain([0, d3.max(VILLES, d => d.population)])\n .range([0, HEIGHT])\n \n // une fonction pour dessiner un bâton\n const drawBar = (d, i) => {\n const x = i * BAR_WIDTH\n const y = HEIGHT - heightScale(d.population)\n const w = BAR_WIDTH - MARGIN\n const h = heightScale(d.population)\n context.fillRect(x, y, w, h)\n }\n \n // une fonction pour écrire les noms des villes\n const writeText = (d, i) => {\n const x = i * BAR_WIDTH + BAR_WIDTH / 2\n const y = HEIGHT - MARGIN * 2\n context.textAlign = 'center'\n context.fillStyle = 'white'\n context.fillText(d.nom, x, y)\n }\n \n // appliquer les fonctions sur toutes les données\n VILLES.forEach(drawBar)\n VILLES.forEach(writeText)\n \n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"md`## Carte avec D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"PAYS = fetch('https://unpkg.com/visionscarto-world-atlas@0.0.3/world/110m_countries.geojson')\n .then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"import { canvas as canvasExample } from '@mbostock/fullscreen-canvas' ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"code = string => html`\n

\n  \n    ${string}\n  \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"