https://www.canva.dev/_next/static/chunks/pages/blog/engineering/h…-new-approach-to-camera-f410dc009abb0e75.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="a8e12d55-d0cb-4d77-ba89-64bfb8dac4a2",e._sentryDebugIdIdentifier="sentry-dbid-a8e12d55-d0cb-4d77-ba89-64bfb8dac4a2")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[54844],{35768:(e,t,a)=>{"use strict";a.r(t),a.d(t,{default:()=>x,meta:()=>v});var i=a(72993),n=a(85803),o=a(65321),s=a(39084);let r={src:"/_next/static/media/img-0-XoJx7ZTqJSsG47pT.e78655b8.png",height:1100,width:1100,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAZlBMVEWkk4C6pIy1oYqej4GxoI2Ki4yXnKGynoevm4OXinuei3VbW2CNgndxZ1lKSE2De3OjqbFWU09iVkNQRjJaTzeus7i8qZR/gH+QfmpYQx+Bc2VLQznj39w6P0mxr6qsknZgZW5wc3pi11DeAAAACXBIWXMAAAsSAAALEgHS3X78AAAARElEQVQImQXBhQHAIAADsOLuMBf2/5NLkF385MgDqcRZeu3Yz9vV0BqEOOzLk4cU7HosKLAFuRpNAOOZASXgXC1Ka/UDjNYDQIolTycAAAAASUVORK5CYII=",blurWidth:8,blurHeight:8},A={src:"/_next/static/media/img-1-tao6xcybKtKpkv7X8CzMvA.3515f63b.png",height:794,width:1734,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAASFBMVEV+g304PUW7mZeqjnZ3cYaSYVuxtbypq65+iqVeYmlvc2jKiHmno5Xu7dt0h42Sl6a3lYyMnp1xWT/U1smClKdndIOweWz///+KyQqVAAAACXBIWXMAAAsSAAALEgHS3X78AAAALElEQVQImWNgEhBnZxQRZGAQY2Xm4WThYGDgZhUS5mfh4GQQZeTiZeNjYwcAFt0BPTvWi5oAAAAASUVORK5CYII=",blurWidth:8,blurHeight:4},h={src:"/_next/static/media/img-0-T-pdFCap7wLrrfmv.cc57392c.png",height:900,width:1600,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAASFBMVEUkISbD3cqPm5ulrK2Ipn9oYWGBgHwBAAB9CBT////QtLrd4eHm9OfL6dDH5cqNfmBpMjzPnqa2XmXz+PgPDQ1oeXiPoaErOTigrv5lAAAACXBIWXMAAAsSAAALEgHS3X78AAAAMElEQVQImQXBBwIAEAwEsKNoa2///6kEPgTSSAsA2yF84DvsFH5wzZko+8KUmjUl/R0CAW+1BQC6AAAAAElFTkSuQmCC",blurWidth:8,blurHeight:5},l={src:"/_next/static/media/img-1-JyxO3a8B0a9UeqHvsuccVw.93b4d31e.png",height:1620,width:1620,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAY1BMVEVHSktvQkEaGxtYXVpfZF+HsIhTU1ETBgmbloYvJi+Yxpq2yZ81NTZAQEKEXl9qamaKqnuSrIKbvI6HondweG+IZmRnbWqGonlwXE3ArplKOkCKiIVjS1axsYafc3QoKyajYWchjMoPAAAACXBIWXMAAAsSAAALEgHS3X78AAAARUlEQVQImR3KRxaAIAwFwA+hJiLYu3L/U/p01oPksoHLhCZ6naL3CK0yYVIE2/Vsl8KAGWfAPf9Z91N/h7a7HrBDYZFLXlfeAuJ3ZQMlAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8},c={src:"/_next/static/media/img-1-GZuhssaDigPVi3a_LHGaQQ.83ebfd6c.png",height:540,width:960,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAMFBMVEUyMjKura4fGxwtLS1sa2hLTEwQEBFXUFJ8qnaAwIORm4iNQkCkvqSFhoKik4ZKFh+xf5qnAAAACXBIWXMAAAsSAAALEgHS3X78AAAALElEQVQImR3ExxEAIAwDMKc69P235UAPgb4Cn+ZLwZNmtMQe3cMJVLUpInIBDxsAvJaig9sAAAAASUVORK5CYII=",blurWidth:8,blurHeight:5},d={src:"/_next/static/media/img-0-ZI_7zhQuHHZkniP5.a8ff5d5e.png",height:702,width:1600,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAAP1BMVEXu7u9fZmZmjYb1/f3+/f3M29TJy8vm5+b49/jk7u7F7Os7eEk/h1l9lIfa/P3X7uyr1sF6g4OKp6nc2tujo6bEAvtdAAAACXBIWXMAAAsSAAALEgHS3X78AAAAKklEQVQImQXBhQEAIAwDsG7McP3/VhIgRB3uyCm3/jahjFn5MAESS6/ZBxEcAQQ/yFaWAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:4},g={src:"/_next/static/media/img-0-uMUjYsv0uLfXdvwI.be54daea.png",height:900,width:1600,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAATlBMVEXz8/EsLS3u7u3M3Mji8+S+y7zEwbmRkpO1sbDz+PWRnX/o9urF5cmdiY6bpJNiTFSNjm8GEhJmaWienp2TvZuYamfX1dVDPkD9/f26ubfIzfdMAAAACXBIWXMAAAsSAAALEgHS3X78AAAAMklEQVQImQXBiQGAIAwAseNtKwIKqOw/qQkvG8nekKn+c07QKvb0e5ByWtfRFCuReAZ+InsBdn5tX1kAAAAASUVORK5CYII=",blurWidth:8,blurHeight:5},p={src:"/_next/static/media/img-0-rIfDWtG4u3wpAs9v.2e97d9ea.png",height:705,width:1600,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAANlBMVEX4+Pg5iV3W3tp0eHjn6Ofu7u/f7OvN0c+v1sT8/v5hfn7z8vLI7+3h//9+lYmLqKtqmI2kpKdJIs3MAAAACXRSTlP+//7//////f0TeYvGAAAACXBIWXMAAAsSAAALEgHS3X78AAAAKUlEQVQImQXBhwEAIAgDsLIFB/r/syaYSFZThaXTeSLwveh2FZAYwREfDwgA3a8dssUAAAAASUVORK5CYII=",blurWidth:8,blurHeight:4},u={src:"/_next/static/media/img-0-Vv1SDfNr84hG1jQm.0b4a92fd.png",height:900,width:1600,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAUVBMVEXz9vPHwrWtqaf07ert8O2enp78/f2TlpM2Nzfl8+aTmn7Y7dzI2sW+4cK2w7fH0L65rq+aiI7a2diWv56Pim21traXaGbJx8RnaWhcRlAADA28kVSxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAM0l

1EQVQImQXBiQJAIBBAwadrN9JFof//UDN0Av4hIH44VRVqE+a3XsqWr3sXAzG640z2ByNBAZ1OA+5eAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:5},m={src:"/_next/static/media/img-1-SDAO8X9tlTNQvMpAt1RHgQ.c62927d7.png",height:540,width:960,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAVFBMVEWvxpF1b2keGBsaGBdNS09+qXYFCQw0NDhVRkg+PkGbxpVwVzuDv4ePQkGCjX63qZljW2FfMD7Z18i4ZWaiwY+EVGDCwLeze3hHFh6Hh4OhkoZeW1j2qz1aAAAACXBIWXMAAAsSAAALEgHS3X78AAAAM0lEQVQImQXBBQLAIAwEsGuBygyf/v+fS/DRE9U9QFksWmHYLSvVqXj3I7d+nUhpWwCMHyVwAbQLhktYAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:5},f={src:"/_next/static/media/img-0-WO7lzElAZu3hLLA7.79181b9d.png",height:1600,width:1600,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAP1BMVEWCfW6YkYKloJJsZ1XCv7TLx7qNh3etqZytp5fAvbB+eGZsVzh2cF90aVVUUUWfmYyPgmrCvapuZFNJWmiKlZ6xVnoyAAAACXBIWXMAAAsSAAALEgHS3X78AAAAPklEQVQImQXBBwLAIAgAsUNBwFHt+P9bm1Cam2om4nFbqrKji3ga7pTSwohdL+/xcVjQzsuazFrH4IEm/Ro/PnMB2wmCgZYAAAAASUVORK5CYII=",blurWidth:8,blurHeight:8},b={src:"/_next/static/media/img-0-Gmf__qTSGSakWY8C.9e61e823.png",height:1080,width:1080,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAWlBMVEVcTT5GMTE6LCQjFhMsJR5GODFmVUpXSjpBNC9fUEdMPS98bmaghnWdf1aefSuDXjWJk54QBwlrXFQuIA1DLhmLYkqkkIpeY2l/bE9JRTh3a06phj+gXRedrbxv6WxvAAAACXBIWXMAAAsSAAALEgHS3X78AAAAQklEQVQImQXBBwLAIAgEsFNBwN29///NJnAY37gSQCT3KZJhaM+Lw5Br673uBbyszsWtIExBSTHDe2USGJQRk0T7AWfZAoe+aDJvAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8};function w(e){let t={a:"a",em:"em",p:"p",...(0,s.R)(),...e.components},{Heading:a,Image:i}=t;return a||y("Heading",!0),i||y("Image",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["We ",(0,o.jsx)(t.em,{children:"love"})," the look of high-end portraits — that shallow-depth-of-field\nlook where the subject is in-focus but the background is blurred out.\nBut some cameras, especially those on smartphones, don't quite manage to\ndo this convincingly. Also sometimes, you'd like to be able to adjust\nthe blur after you've taken the photo too."]}),"\n",(0,o.jsxs)(t.p,{children:["So here at Canva we've built\n",(0,o.jsx)(t.a,{href:"https://www.canva.com/features/photo-effects/",children:"Auto Focus"}),", a camera simulation tool that allows you\nto re-photograph your images with a high-end virtual camera lens to get\nthat distinctive portrait look. To do this, we drew on the classic\nprinciples of optics and physics in early cameras to build the most\nphysically-accurate digital effect possible."]}),"\n",(0,o.jsx)(i,{src:r,alt:"",caption:"Example of Auto Focus applied to an image (original on the left)"}),"\n",(0,o.jsx)(a,{depth:2,id:"why-camera-simulation-is-needed-for-smartphone-photography",children:"Why camera simulation is needed for smartphone photography"}),"\n",(0,o.jsx)(t.p,{children:"The shallow depth-of-field look is typically achieved through a\ncombination of a large imaging surface and classic optical design allows\nsubjects to be isolated and backgrounds to be blurred, turning image\ndistractions into less prominent splashes of color."}),"\n",(0,o.jsx)(i,{src:A,alt:"",caption:"Images with shallow depth-of-field taken with a DSLR"}),"\n",(0,o.jsx)(t.p,{children:"This look isn't so easy to achieve with cell phone cameras because the\nheritage of cell phone optics dates back to the early days of\nphotography. Soon after cameras were developed it became obvious that\nmost people wanted to take photos, without having to do other things\nlike adjust focus dials."}),"\n",(0,o.jsxs)(t.p,{children:["Kodak solved this in 1900 with the\n",(0,o.jsx)(t.a,{href:"https://www.brownie-camera.com/",children:"Brownie"})," which was like the iPhone of the 20th\ncentury — simple user interface, no dials. Thanks to clever lens design\nthere was no need to focus because ",(0,o.jsx)(t.em,{children:"everything"})," is in focus, and this\noptical design principle has carried forward to modern cellphones today.\nThis naturally comes at the cost of shallow-depth-of-field, which now\nneeds more complex optics (extra lenses!) or camera simulation to\nachieve."]}

1),"\n",(0,o.jsx)(a,{depth:2,id:"problems-with-existing-shallow-depth-of-field-simulations",children:"Problems with existing shallow-depth-of-field simulations"}),"\n",(0,o.jsxs)(t.p,{children:["Camera simulation allows us to re-capture images through a simulation of\na high-end camera. The classic simulation approach places a given pixel\nout of focus by processing a circle of its surrounding pixels, before\nfinding the average colour for a new blurred pixel. The more out of\nfocus a pixel is, the larger the circle or ",(0,o.jsx)(t.em,{children:"kernel"})," needs to be."]}),"\n",(0,o.jsx)(t.p,{children:"Unfortunately, this often results in problems with color leaking between\nin-focus and out-of-focus areas. It leads to artificial smoothness, in a\nway that doesn't look natural. This happens because the cylindrical\nsample for each pixel, (the kernel) includes pixels from both in-focus\nareas and the foreground, softening the edges of the simulation."}),"\n",(0,o.jsx)(i,{src:h,alt:"",caption:"In the previous example showing the foreground leaking into the background (left), see the sampling kernel for a specific point (circled above). We'd expect that the defocused region behind the camera would be dark, but in the sampling kernel nearly half of it is the red plastic of the foreground object. When this is averaged, we get a muddy red instead of deep black"}),"\n",(0,o.jsx)(i,{src:l,alt:"",caption:"From top to bottom, left to right: the original image, an image with the old technique, an image with the new technique, and finally, a reference image taken with a DSLR"}),"\n",(0,o.jsx)(a,{depth:3,id:"a-quick-note-on-depth-maps",children:"A quick note on depth maps"}),"\n",(0,o.jsxs)(t.p,{children:["Underpinning the camera simulation techniques here are ",(0,o.jsx)(t.em,{children:"depth maps"}),",\nwhich were initially used in games and visual effects. Our ",(0,o.jsx)(t.em,{children:"depth maps"}),"\nare generated by using a machine learning algorithm to determine the\ndepth profile of an image. The depth of each pixel is calculated and\nstored, to create a 2.5D diorama from the picture. A pixel's level of\nblur is determined by its position on the depth map, that is, the\nfarther away from the focus point the more out-of-focus it is."]}),"\n",(0,o.jsx)(i,{src:c,alt:"",caption:"The source image (left) and the generated depth map (right). The brighter the pixel in the depth map, the closer it is to the camera. Note how the green box and red camera are brighter, and the garage is darker"}),"\n",(0,o.jsx)(a,{depth:3,id:"more-accurate-light-transport",children:"More accurate light transport"}),"\n",(0,o.jsx)(t.p,{children:"To get a more accurate simulation, we aimed to replicate how light moves\nin the real world. Real cameras don't receive light in a perfectly\nshaped cylinder, but instead receive light that's projected in a conical\npattern via the lens. As such, we aimed camera simulation to replicate\nthis, with a pixel that is out of focus being treated as the focal point\nbetween two light cones — as shown in the diagrams below."}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(i,{src:d,alt:""})}),"\n",(0,o.jsx)(i,{src:g,alt:"",caption:"A top-down and isometric view of our example scene, with the red camera and green box in the foreground and the garage scene in the background. Here our updated model based on camera optics uses two cones whose apex meets at the focus depth to figure out which pixels should contribute in our kernel. Note that the pixel that is just near the edge of the in-focus object but in an out-of-focus area (along the axis of the cones) correctly excludes pixels from the in-focus region but gets most of its contribution from the background"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(i,{src:p,alt:""})}),"\n",(0,o.jsx)(i,{src:u,alt:"",caption:"The same scene but with the previous cylindrical model for sampling. Note that the out-of-focus pixel in the lower part of the diagram samples many pixels from the in-focus region, leading to the characteristic color leakage into the out-of-focus area"}

1),"\n",(0,o.jsx)(a,{depth:2,id:"conclusion",children:"Conclusion"}),"\n",(0,o.jsx)(i,{src:m,alt:"",caption:"Comparing the new results (left) versus the DSLR reference (right). Note the lack of color leakage around the foreground object edges"}),"\n",(0,o.jsx)(t.p,{children:"We're big camera and photo nerds over here at Canva, and we wanted to\nbring you the most faithful camera simulation we could. Designers and\nphotographers love attention to detail; while the traditional\nshallow-depth-of-field simulation works, the oversmooth and leaky look\nputs it into uncanny valley, occasionally looking artificial."}),"\n",(0,o.jsx)(t.p,{children:"We've extensively studied film cameras and photos to tune our new\ntechnique to bring you the best camera simulation we could make, giving\nyou a true-to-life authentic vintage camera experience."}),"\n",(0,o.jsx)(a,{depth:2,id:"try-it-out",children:"Try it out!"}),"\n",(0,o.jsxs)(t.p,{children:["A special thanks to ",(0,o.jsx)(t.a,{href:"https://www.linkedin.com/in/kerry-halupka/",children:"Kerry"})," for the ML magic, and to\n",(0,o.jsx)(t.a,{href:"https://www.linkedin.com/in/harleymellifont/",children:"Harley"})," and the photo editor team for getting this\nout into the world!"]}),"\n",(0,o.jsxs)(t.p,{children:["We're really excited to see all the amazing things the Canva community\ncreates with this tool. You can ",(0,o.jsx)(t.a,{href:"https://canva.me/XggvM06Dwkb",children:"try it out for yourself in Canva right now"}),"! We hope\nyou like it as much as we do. As a finale, enjoy the images below."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"Interested in photography, machine learning and image processing?"}),"\n",(0,o.jsx)(t.a,{href:"https://www.canva.com/careers/engineering/",children:(0,o.jsx)(t.em,{children:"Join\nus!"})})]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(i,{src:f,alt:""})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(i,{src:b,alt:""})})]})}function x(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(w,{...e})}):w(e)}function y(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}let v={title:"Combining Classic and Modern: A New Approach to Camera Simulation",abstract:"Applying classic principles from physics and optics to build the best possible camera effects at Canva.",image:"./images/thumbnail.png",publishedDate:new Date(0x17d3070fafd),state:"live",tags:["Computer Vision","Photography","Machine Learning","Image Processing","Computational Photography"],authors:"[email protected]",post:{title:"Combining Classic and Modern: A New Approach to Camera Simulation",abstract:"Applying classic principles from physics and optics to build the best possible camera effects at Canva.",image:"engineering/how-canva-combined-modern-image-processing-with-150-year-old-optics-for-a-new-approach-to-camera/images/thumbnail.png",publishedDate:0x17d3070fafd,state:"live",tags:["Computer Vision","Photography","Machine Learning","Image Processing","Computational Photography"],authors:[{name:"Bhautik Joshi",url:"https://bhautik.org",photo:"https://avatars.slack-edge.com/2021-03-16/1874331489329_2e36cec5960b1e283722_192.jpg"}],category:"Computer Vision",slug:"/blog/engineering/how-canva-combined-modern-image-processing-with-150-year-old-optics-for-a-new-approach-to-camera/"},otherPosts:[{title:"Discovering Headroll (CVE-2023–0704) in Chromium",abstract:"Discovery of Headless Chromium security vulnerability, how it works, and mitigations that should be applied to similar configurations",image:"engineering/discovering-headroll-cve-2023-0704-in-chromium/images/thumbnail.png",publishedDate:0x18753cd15d4,state:"live",tags:["Security","Chromium","Vulnerability","Bugs","Puppeteer"],authors:[{name:"Zac Sims",url:"https://au.linkedin.com/in/zacsims",photo:"https://avatars.slack-edge.com/2026-06-26/11448741507029_756dec055cacb01eadf2_192.png"},{name:"Rhys Elsmore",url:"https://au.linkedin.com/in/rhyselsmore"}],category:"Security",slug:"/blog/engineering/discovering-headroll-cve-2023-0704-in-chromium/"},{title:"How we see groups in design",abstract:"How we understand and detect groups in user designs",publishedDate:1718928001e3,image:"engineering/how-we-see-groups-in-design/images/thumbnail.jpg",state:"live",tags:["Computer vision","Deep learning","Machine learning"],authors:[{name:"Xin Liang",url:"https://www.linkedin.com/in/xin-liang-0968b270/",photo:"https://avatars.slack-edge.com/2024-11-04/7987715450177_644d1a847ac8a9508ed4_192.jpg"}],category:"Computer vision",slug:"/blog/engineering/how-we-see-groups-in-design/"},{title:"Alpha Blending and WebGL",abstract:"This article introduces alpha blending and some tips relating to the alpha channel in WebGL development.",image:"engineering/alpha-blending-and-webgl/images/thumbnail.jpg",publishedDate:15123492e5,state:"live",tags:["Frontend"],authors:[{name:"David Guan",url:"https://twitter.com/davidguandev",photo:"https://avatars.slack-edge.com/2026-01-28/10379676100499_33f28b45f79d380a033b_192.jpg"}],category:"Frontend",slug:"/blog/engineering/alpha-blending-and-webgl/"}]};x.getLayout=e=>(0,o.jsx)(i.Q,{children:(0,o.jsx)(n.L,{...v,children:e})})},47166:(e,t,a)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/engineering/how-canva-combined-modern-image-processing-with-150-year-old-optics-for-a-new-approach-to-camera",function(){return a(35768)}])},72993:(e,t,a)=>{"use strict";a.d(t,{Q:()=>r});var i=a(65321);a(97109);var n=a(90286),o=a(21790),s=a(83561);let r=e=>(0,i.jsx)(n.W,{blog:o.h,navbar:s.v_,layout:e.layout,children:e.children})}},e=>{e.O(0,[33096,39058,38460,87726,11886,75319,84624,77411,88586,18716,38456,90252,31965,54047,62156,86664,36492,13206,85803,90636,46593,38792],()=>e(e.s=47166)),_N_E=e.O()}]);