25:["$","title",null,{"children":"Drawing SVG rectangles | Ryan Killeen | Observable"}] 49:T5fa,md` Now let's rewrite our drawing function so that these keys are accounted for. When __constraining__ the drawing to a square, the width and the height of the rectangle become equal — but equal to that? Different design applications use different conventions: some of them will take whichever of the two is the _smallest_, and others will take whichever is _largest_. They're both valid interactions, but in this example we'll take the largest dimension, which to me feels nicer. In the code below, the \`if (is_constrained)\ \{…}\` branch snaps \`current_coords\` to a square. As for __drawing from center__, this affects both the size of our rectangle and its top-left corner. The ${circle('blue')} blue dot will become the center of our rectangle. The width and height will always be _twice the delta_. To find the top-left corner, we need to compute the [reflection](https://en.wikipedia.org/wiki/Point_reflection) of the ${circle('red')} red dot across the ${circle('blue')} blue dot, which is expressed as: ${tex` \text{Reflection}(\text{current\_coords}) = 2 \times \text{initial\_coords} - \text{current\_coords} `} and so, our rectangle is described as: ${tex`\left\{ \begin{array}{l} \bold{X} = min(X_{\text{reflected}}, X_{\text{current}}) \\ \\ \bold{Y} = min(Y_{\text{reflected}}, Y_{\text{current}}) \\ \\ \bold{Width} = 2 \times ΔX = 2 \times |X_{\text{initial}} - X_{\text{current}}| \\ \\ \bold{Height} = 2 \times ΔY = 2 \times |Y_{\text{initial}} - Y_{\text{current}}| \end{array} \right. `} `4a:T55e,{ let description = describe(`updates the rectangle \`rect_keys\``); let current_x = current_coords.x; let current_y = current_coords.y; if (is_constrained) { // compute the distance on the X and Y coordiantes... let deltaX = current_coords.x - initial_coords.x; let deltaY = current_coords.y - initial_coords.y; // ...then find whichever is largest... let delta = Math.max(Math.abs(deltaX), Math.abs(deltaY)); // ...which we then apply to both the X and Y coordinates current_x = initial_coords.x + (Math.sign(deltaX) || 1) * delta; current_y = initial_coords.y + (Math.sign(deltaY) || 1) * delta; } let x, y; let width = Math.abs(current_x - initial_coords.x); let height = Math.abs(current_y - initial_coords.y); if (is_from_center) { let reflected_x = 2 * initial_coords.x - current_x; let reflected_y = 2 * initial_coords.y - current_y; x = Math.min(reflected_x, current_x); y = Math.min(reflected_y, current_y); width = 2 * width; height = 2 * height; } else { x = Math.min(initial_coords.x, current_x); y = Math.min(initial_coords.y, current_y); } rect_keys.setAttribute('x', x); rect_keys.setAttribute('y', y); rect_keys.setAttribute('width', width); rect_keys.setAttribute('height', height); return description; }4b:[] 29:{"id":"637a95ab47ea1e79","slug":null,"title":"Drawing SVG rectangles","thumbnail":"40356f77586bb56314f58a33a6451083627cf2384764da18723696a524ecdfbd","access_level":"public","create_time":"$D2023-04-12T19:16:25.985Z","update_time":"$D2023-04-12T19:19:00.412Z","view_time":null,"first_public_time":"$D2023-04-12T19:16:25.985Z","has_unpublished_edits":null,"fork":{"id":"a12d6d9e32cf7bf5","slug":"drawing-svg-rectangles","title":"Drawing SVG rectangles","owner":{"id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b5b99af1162d354a","login":"rykilleen","name":"Ryan Killeen","avatar_url":"https://avatars-next.observableusercontent.com/fc77e8f57376fab836c41a14462d74411284610123063432f155e2988c6437b8","tier":"starter_2024","bio":"Looking for new things to be wrong about.\r\n\r\nFind me on Twitter at @deathbypapercut","followed_by_you":false,"follows_you":false},"version":898,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4859e6910660ea44","login":"rykilleen","name":"Ryan Killeen","avatar_url":"https://avatars-next.observableusercontent.com/fc77e8f57376fab836c41a14462d74411284610123063432f155e2988c6437b8","tier":null,"bio":"Looking for new things to be wrong about.\r\n\r\nFind me on Twitter at @deathbypapercut","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4859e6910660ea44","login":"rykilleen","name":"Ryan Killeen","avatar_url":"https://avatars-next.observableusercontent.com/fc77e8f57376fab836c41a14462d74411284610123063432f155e2988c6437b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Drawing SVG rectangles","cells":[{"id":0,"value":"md`\n# Drawing SVG rectangles\n\nIn this notebook we'll look at how to draw [SVG rectangles](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect) based on the mouse coordinates using the DOM methods readily available in the browser. \n\n## Part I: Basic drawing\n\nLet's start by defining the DOM for our SVG. A ${circle('blue')} blue dot marks the cursor position when we first hold down the mouse, while a ${circle('red')} red dot shows the current coordinates as we drag the mouse. A rectangle is drawn between the two dots. Try it below:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"canvas = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`\nLet's also extract references to the individual elements inside our SVG, so that we can apply attributes to them as we interact with the canvas. (We use the term ‘canvas’ throughout this notebook in the painterly sense, not to be confused with the [\\`