# \#canvas

**URL:** https://discourse.threejs.org/tag/canvas/212.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Hiring a WebGL / Three.js Engineer at Monet.io](https://discourse.threejs.org/t/hiring-a-webgl-three-js-engineer-at-monet-io/91358)

<div class="topic-metadata">

**Author:** [@monet](https://discourse.threejs.org/u/monet)\
**Replies:** 9\
**Last updated:** [May 27, 2026, 7:28am UTC](https://discourse.threejs.org/t/hiring-a-webgl-three-js-engineer-at-monet-io/91358 "2026-05-27T07:28:58Z")

</div>

\[UPDATE: This position has been filled. Thank you to everyone who applied\] Remote | Full-time Contractor Salary Range: 3,000 - 4,500 USD / Month Portfolio or GitHub required Monet.io is hiring a WebGL / Three.js Engi…

---

## [Canvas2D reimplementation of Gorillas.BAS with fixed timestep physics and destructible terrain](https://discourse.threejs.org/t/canvas2d-reimplementation-of-gorillas-bas-with-fixed-timestep-physics-and-destructible-terrain/91477)

<div class="topic-metadata">

**Author:** [@red-reddington](https://discourse.threejs.org/u/red-reddington)\
**Replies:** 0\
**Last updated:** [May 9, 2026, 9:28am UTC](https://discourse.threejs.org/t/canvas2d-reimplementation-of-gorillas-bas-with-fixed-timestep-physics-and-destructible-terrain/91477 "2026-05-09T09:28:57Z")

</div>

I rebuilt the early 90s QBasic game Gorillas.BAS as a fully browser-native Canvas2D game to explore how far a lightweight rendering stack can be pushed without a framework. It’s a single-file implementation with: dete…

---

## [Three.js Canvas jumps on mobile when address bar hides/shows (100vh issue)](https://discourse.threejs.org/t/three-js-canvas-jumps-on-mobile-when-address-bar-hides-shows-100vh-issue/87435)

<div class="topic-metadata">

**Author:** [@P4CHO](https://discourse.threejs.org/u/P4CHO)\
**Replies:** 1\
**Last updated:** [October 9, 2025, 2:40pm UTC](https://discourse.threejs.org/t/three-js-canvas-jumps-on-mobile-when-address-bar-hides-shows-100vh-issue/87435 "2025-10-09T14:40:29Z")

</div>

Hi everyone :waving\_hand: I’m building a hero section using React Three Fiber (based on Three.js) and everything looks perfect on desktop but on mobile browser ( Safari ) especially on Iphone the canvas jumps up and dow…

---

## [How do I wait for the \<canvas\> to update? All three.js FPS counters are inaccurate without this ability](https://discourse.threejs.org/t/how-do-i-wait-for-the-canvas-to-update-all-three-js-fps-counters-are-inaccurate-without-this-ability/87381)

<div class="topic-metadata">

**Author:** [@torrent](https://discourse.threejs.org/u/torrent)\
**Replies:** 3\
**Last updated:** [October 6, 2025, 7:50pm UTC](https://discourse.threejs.org/t/how-do-i-wait-for-the-canvas-to-update-all-three-js-fps-counters-are-inaccurate-without-this-ability/87381 "2025-10-06T19:50:42Z")

</div>

Calling renderer.render() in a requestAnimationFrame() loop will often fire faster than the \<canvas\> element can update its image, making any “true” FPS measurement inaccurate. In three.js, how can I block each iteratio…

---

## [mobile layout resize issues](https://discourse.threejs.org/t/mobile-layout-resize-issues/86302)

<div class="topic-metadata">

**Author:** [@Prajwal\_BM](https://discourse.threejs.org/u/Prajwal_BM)\
**Replies:** 1\
**Last updated:** [August 18, 2025, 12:28pm UTC](https://discourse.threejs.org/t/mobile-layout-resize-issues/86302 "2025-08-18T12:28:27Z")

</div>

im new to threejs and this is my first project and im having trouble. the layout is working perfectly on bigger screens and laptops, when i open it in the tablet or mobile phone, that white thing appears, which i guess i…

---

## [What is best choice for manage 2D and 3D at the same time?](https://discourse.threejs.org/t/what-is-best-choice-for-manage-2d-and-3d-at-the-same-time/85452)

<div class="topic-metadata">

**Author:** [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Replies:** 8\
**Last updated:** [July 27, 2025, 4:33pm UTC](https://discourse.threejs.org/t/what-is-best-choice-for-manage-2d-and-3d-at-the-same-time/85452 "2025-07-27T16:33:16Z")

</div>

I am working on a project where users need to design structures (like walls, windows, and doors) in a 2D-floor plan and then view the same design in 3D. I’m trying to figure out the best approach to implement this functi…

---

## [Need Guidance: Best Frameworks for LEGO Model Editor with 3D Canvas, Drag & Drop, and Physics](https://discourse.threejs.org/t/need-guidance-best-frameworks-for-lego-model-editor-with-3d-canvas-drag-drop-and-physics/84938)

<div class="topic-metadata">

**Author:** [@ubaid](https://discourse.threejs.org/u/ubaid)\
**Replies:** 6\
**Last updated:** [July 9, 2025, 3:48pm UTC](https://discourse.threejs.org/t/need-guidance-best-frameworks-for-lego-model-editor-with-3d-canvas-drag-drop-and-physics/84938 "2025-07-09T15:48:55Z")

</div>

I’m building a web app that involves integrating LEGO-style models along with canvas-based interactions and editing capabilities. I’m currently a bit confused about which frameworks would work best for this setup, so I’m…

---

## [Calling the function before unmounting the сanvas](https://discourse.threejs.org/t/calling-the-function-before-unmounting-the-anvas/82035)

<div class="topic-metadata">

**Author:** [@Oleksandr-Fedorov](https://discourse.threejs.org/u/Oleksandr-Fedorov)\
**Replies:** 0\
**Last updated:** [May 5, 2025, 1:11pm UTC](https://discourse.threejs.org/t/calling-the-function-before-unmounting-the-anvas/82035 "2025-05-05T13:11:30Z")

</div>

What’s the proper way to capture a screenshot from a React Three Fiber canvas just before unmounting the component? I need to take a high-quality snapshot of the 3D scene and upload it to AWS S3, but I’m encountering Web…

---

## [WebGL Model not display at center and not fit on whole canvas](https://discourse.threejs.org/t/webgl-model-not-display-at-center-and-not-fit-on-whole-canvas/78814)

<div class="topic-metadata">

**Author:** [@Muhammad\_Hassan\_Akram](https://discourse.threejs.org/u/Muhammad_Hassan_Akram)\
**Replies:** 2\
**Last updated:** [March 2, 2025, 8:44pm UTC](https://discourse.threejs.org/t/webgl-model-not-display-at-center-and-not-fit-on-whole-canvas/78814 "2025-03-02T20:44:52Z")

</div>

I have thousands of 3D models, primarily floorplans, that I need to display fully fitted within a React Three.js (@react-three/fiber) canvas. I attempted to implement functions to center and calculate the appropriate zoo…

---

## [React DREI \<HTML\>](https://discourse.threejs.org/t/react-drei-html/78525)

<div class="topic-metadata">

**Author:** [@Abhirup\_Das](https://discourse.threejs.org/u/Abhirup_Das)\
**Replies:** 5\
**Last updated:** [February 23, 2025, 10:15pm UTC](https://discourse.threejs.org/t/react-drei-html/78525 "2025-02-23T22:15:41Z")

</div>

\<Canvas\> \<axesHelper /\> \<CameraRig position={cameraPos} /\> \<Floor props={floorProps} /\> \<WallContainer props={wallData} isSelectionDisabled={true} /\> \<ambientLight intensity={5} /\> \<pointLight p…

---

## [How to record your canvas or screen for video capture?](https://discourse.threejs.org/t/how-to-record-your-canvas-or-screen-for-video-capture/49872)

<div class="topic-metadata">

**Author:** [@SeeOn](https://discourse.threejs.org/u/SeeOn)\
**Replies:** 3\
**Last updated:** [December 23, 2024, 2:44pm UTC](https://discourse.threejs.org/t/how-to-record-your-canvas-or-screen-for-video-capture/49872 "2024-12-23T14:44:06Z")

</div>

I recently came across this website Design the next iPhone where after you click preset you have an option of downloading the video of 6s. As you can see below Does anyone know how can I record the canvas for video …

---

## [Weird bug with drawing on canvas using renders from cameras, need help please!](https://discourse.threejs.org/t/weird-bug-with-drawing-on-canvas-using-renders-from-cameras-need-help-please/73103)

<div class="topic-metadata">

**Author:** [@Aramis](https://discourse.threejs.org/u/Aramis)\
**Replies:** 0\
**Last updated:** [October 22, 2024, 10:38pm UTC](https://discourse.threejs.org/t/weird-bug-with-drawing-on-canvas-using-renders-from-cameras-need-help-please/73103 "2024-10-22T22:38:11Z")

</div>

I have this weird bug on my website when I try to draw on a canvas. I’m using cameras to “take a picture” of walls and draw them on canvases. I have 4 of these, but for some reason only this canvas is acting weird and I …

---

## [Sharing the same WebGL context for different canvases](https://discourse.threejs.org/t/sharing-the-same-webgl-context-for-different-canvases/73034)

<div class="topic-metadata">

**Author:** [@vladimir.ryazancev13](https://discourse.threejs.org/u/vladimir.ryazancev13)\
**Replies:** 9\
**Last updated:** [October 22, 2024, 4:59am UTC](https://discourse.threejs.org/t/sharing-the-same-webgl-context-for-different-canvases/73034 "2024-10-22T04:59:20Z")

</div>

Hello everyone, maybe someone knows an approach how to create one WebGL context and transfer it to different canvases without using drawImage (I’m using drawImage now, but it loads the Firefox browser a lot and I need to…

---

## [HTML 5 Canvas Animation messed up while changing resolution and not working on mobile](https://discourse.threejs.org/t/html-5-canvas-animation-messed-up-while-changing-resolution-and-not-working-on-mobile/65137)

<div class="topic-metadata">

**Author:** [@Hamza\_Ashraf](https://discourse.threejs.org/u/Hamza_Ashraf)\
**Replies:** 0\
**Last updated:** [May 6, 2024, 4:45pm UTC](https://discourse.threejs.org/t/html-5-canvas-animation-messed-up-while-changing-resolution-and-not-working-on-mobile/65137 "2024-05-06T16:45:14Z")

</div>

solved : this code is removed for security reasons.

---

## [Unable to handle multiple images and texts on canvas](https://discourse.threejs.org/t/unable-to-handle-multiple-images-and-texts-on-canvas/70363)

<div class="topic-metadata">

**Author:** [@Abomel\_puka](https://discourse.threejs.org/u/Abomel_puka)\
**Replies:** 2\
**Last updated:** [September 6, 2024, 3:46pm UTC](https://discourse.threejs.org/t/unable-to-handle-multiple-images-and-texts-on-canvas/70363 "2024-09-06T15:46:08Z")

</div>

const \[image, setImage\] = useState(""); const \[imageWidth, setImageWidth\] = useState(0); const HandleImageInput = (e) =\> { const reader = new FileReader(); let imageUrl; reader.onload = () =\> { if…

---

## [Canvas can't be resized with css](https://discourse.threejs.org/t/canvas-cant-be-resized-with-css/69454)

<div class="topic-metadata">

**Author:** [@Nxrix](https://discourse.threejs.org/u/Nxrix)\
**Replies:** 2\
**Last updated:** [August 20, 2024, 7:42pm UTC](https://discourse.threejs.org/t/canvas-cant-be-resized-with-css/69454 "2024-08-20T19:42:09Z")

</div>

Three.js applies a custom css to the canvas and this locks the size and I can’t apply any css to it

---

## [Canvas filter on threejs canvas](https://discourse.threejs.org/t/canvas-filter-on-threejs-canvas/68042)

<div class="topic-metadata">

**Author:** [@MrBodean](https://discourse.threejs.org/u/MrBodean)\
**Replies:** 3\
**Last updated:** [July 12, 2024, 4:08pm UTC](https://discourse.threejs.org/t/canvas-filter-on-threejs-canvas/68042 "2024-07-12T16:08:10Z")

</div>

I was trying to add some normal canvas options like rectfill and filter to my main threejs canvas var canvas = document.getElementById(“Main\_Canvas”); //threejs canvas var ctx = canvas.getContext(‘2d’); ctx.fillStyle=…

---

## [Export to PDF the three.js canvas PLUS an html container. How?](https://discourse.threejs.org/t/export-to-pdf-the-three-js-canvas-plus-an-html-container-how/68054)

<div class="topic-metadata">

**Author:** [@Natalia\_Medrano](https://discourse.threejs.org/u/Natalia_Medrano)\
**Replies:** 11\
**Last updated:** [July 12, 2024, 2:03pm UTC](https://discourse.threejs.org/t/export-to-pdf-the-three-js-canvas-plus-an-html-container-how/68054 "2024-07-12T14:03:17Z")

</div>

Hello guys, I am struggling to export one page of my web app into PDF. I currently have an html container which contains the three.js canvas and some div with panels and so on. The three.js canvas has four viewports at …

---

## [Canvas Height stucked in 1080px](https://discourse.threejs.org/t/canvas-height-stucked-in-1080px/66964)

<div class="topic-metadata">

**Author:** [@iHast](https://discourse.threejs.org/u/iHast)\
**Replies:** 11\
**Last updated:** [June 24, 2024, 10:37am UTC](https://discourse.threejs.org/t/canvas-height-stucked-in-1080px/66964 "2024-06-24T10:37:15Z")

</div>

I’m trying to create a website using a Canvas as the background, similar to the Scroll Controls in React Three Fiber, but using just Three.js, HTML, and CSS. My problem: My canvas isn’t growing beyond 1080px in height.…

---

## [Most efficient texture preview on another canvas](https://discourse.threejs.org/t/most-efficient-texture-preview-on-another-canvas/65679)

<div class="topic-metadata">

**Author:** [@mac](https://discourse.threejs.org/u/mac)\
**Replies:** 5\
**Last updated:** [May 18, 2024, 2:06pm UTC](https://discourse.threejs.org/t/most-efficient-texture-preview-on-another-canvas/65679 "2024-05-18T14:06:12Z")

</div>

I appreciate this is already somewhat coved in other posts but I haven’t found a definitive answer. I have a pretty involved workflow with a lot of shaders and steps in a render pipeline. I want a way to see the realtim…

---

## [Three version update and not working react three fiber canvas linear](https://discourse.threejs.org/t/three-version-update-and-not-working-react-three-fiber-canvas-linear/64541)

<div class="topic-metadata">

**Author:** [@jonghyeok](https://discourse.threejs.org/u/jonghyeok)\
**Replies:** 2\
**Last updated:** [May 9, 2024, 6:09am UTC](https://discourse.threejs.org/t/three-version-update-and-not-working-react-three-fiber-canvas-linear/64541 "2024-05-09T06:09:51Z")

</div>

When I was using the “three”: “^0.160.0” version, I could change the linear property of the Canvas component in React Three Fiber by toggling a button, which allowed me to enable or disable gamma correction on the canvas…

---

## [Canvas cropping](https://discourse.threejs.org/t/canvas-cropping/64958)

<div class="topic-metadata">

**Author:** [@Thulo\_Maepa](https://discourse.threejs.org/u/Thulo_Maepa)\
**Replies:** 0\
**Last updated:** [May 2, 2024, 12:37pm UTC](https://discourse.threejs.org/t/canvas-cropping/64958 "2024-05-02T12:37:12Z")

</div>

I’ve created a canvas with a sprite in it \<Canvas className="absolute w-screen h-screen" ref={canvas}\> \<LandbaseSprite positionX={-10} texture={landbaseSprite} /\> \<OrbitControls/\> \</Canvas\> I w…

---

## [Scale image texture](https://discourse.threejs.org/t/scale-image-texture/63795)

<div class="topic-metadata">

**Author:** [@Noa](https://discourse.threejs.org/u/Noa)\
**Replies:** 1\
**Last updated:** [April 9, 2024, 9:32am UTC](https://discourse.threejs.org/t/scale-image-texture/63795 "2024-04-09T09:32:53Z")

</div>

Hi, We are working on a function that will be called when for example a slider changes values and it updates the scale of an image texture. The image texture has already been created with drawing the image source on a c…

---

## [Canvas Issue on Chrome Browser In Android Tablet Devices](https://discourse.threejs.org/t/canvas-issue-on-chrome-browser-in-android-tablet-devices/51436)

<div class="topic-metadata">

**Author:** [@mlelyakan](https://discourse.threejs.org/u/mlelyakan)\
**Replies:** 5\
**Last updated:** [April 7, 2024, 1:50pm UTC](https://discourse.threejs.org/t/canvas-issue-on-chrome-browser-in-android-tablet-devices/51436 "2024-04-07T13:50:03Z")

</div>

Hi All, I’m faced with an issue about GLTF model viewing on tablet devices. I have a project and I put the canvas element in a container (Html div element). When I load a GLTF model the model always seeing at the bottom…

---

## [Canvas with Flex 1 not Transitioning Smoothly](https://discourse.threejs.org/t/canvas-with-flex-1-not-transitioning-smoothly/63696)

<div class="topic-metadata">

**Author:** [@rookie101](https://discourse.threejs.org/u/rookie101)\
**Replies:** 1\
**Last updated:** [April 6, 2024, 10:08am UTC](https://discourse.threejs.org/t/canvas-with-flex-1-not-transitioning-smoothly/63696 "2024-04-06T10:08:03Z")

</div>

I have this \<div style={{ flexDirection: "row", display: "flex"}}\> \<ThreeContent id={"three-content"} style={{ flex: 1, backgroundColor: "red" }} /\> \<HTMLContent id={"html-content"} style={{ flex: 1, display: "…

---

## [Positioning the Canvas on Different Screen Size](https://discourse.threejs.org/t/positioning-the-canvas-on-different-screen-size/63153)

<div class="topic-metadata">

**Author:** [@Junaid\_Jamil](https://discourse.threejs.org/u/Junaid_Jamil)\
**Replies:** 3\
**Last updated:** [March 27, 2024, 5:37am UTC](https://discourse.threejs.org/t/positioning-the-canvas-on-different-screen-size/63153 "2024-03-27T05:37:19Z")

</div>

I want to positioning images on different screen size with different position but I use this switch case but still when I refresh page than it works otherwise its still there import { OrbitControls } from "https://cdn.j…

---

## [Canvas not working](https://discourse.threejs.org/t/canvas-not-working/62580)

<div class="topic-metadata">

**Author:** [@Riddhi1622](https://discourse.threejs.org/u/Riddhi1622)\
**Replies:** 3\
**Last updated:** [March 12, 2024, 1:07am UTC](https://discourse.threejs.org/t/canvas-not-working/62580 "2024-03-12T01:07:20Z")

</div>

const EarthCanvas = () =\> { return( \<Canvas shadows frameloop='demand' gl={{preserveDrawingBuffer: true}} camera={{}} \> \<Suspense fallback={\<CanvasLoader/\>}\> \<OrbitControls …

---

## [Embedding a THREE.js widget within a Canvas course page](https://discourse.threejs.org/t/embedding-a-three-js-widget-within-a-canvas-course-page/61495)

<div class="topic-metadata">

**Author:** [@CollinsEM](https://discourse.threejs.org/u/CollinsEM)\
**Replies:** 0\
**Last updated:** [February 15, 2024, 1:04pm UTC](https://discourse.threejs.org/t/embedding-a-three-js-widget-within-a-canvas-course-page/61495 "2024-02-15T13:04:58Z")

</div>

I am currently teaching a course on Orbital Mechanics, and the primarily means of delivering course content (outside of the lectures) is through Canvas (the website portal software stack thingy). I would really like to e…

---

## [Inserting content (text, videos, etc..) in Canvas, behind a model](https://discourse.threejs.org/t/inserting-content-text-videos-etc-in-canvas-behind-a-model/61254)

<div class="topic-metadata">

**Author:** [@thextina](https://discourse.threejs.org/u/thextina)\
**Replies:** 2\
**Last updated:** [February 13, 2024, 9:31am UTC](https://discourse.threejs.org/t/inserting-content-text-videos-etc-in-canvas-behind-a-model/61254 "2024-02-13T09:31:23Z")

</div>

Hi everyone! I have been learning three.js, three-fiber, and three-drei. I am working with React library, where I have a component that consists of two gltfjsx components: Scene and Person. I need to add a text inside …

---

## [String.replace is not a function at three.module.js inside resolveIncludes funtion](https://discourse.threejs.org/t/string-replace-is-not-a-function-at-three-module-js-inside-resolveincludes-funtion/26193)

<div class="topic-metadata">

**Author:** [@abdulsalamalmahdi](https://discourse.threejs.org/u/abdulsalamalmahdi)\
**Replies:** 5\
**Last updated:** [January 28, 2024, 9:30pm UTC](https://discourse.threejs.org/t/string-replace-is-not-a-function-at-three-module-js-inside-resolveincludes-funtion/26193 "2024-01-28T21:30:10Z")

</div>

I get this error when I pass canvas to webGLRenderer. this is my index.js that contain a Gl class : import \* as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitContro…

[Next page](https://discourse.threejs.org/tag/canvas/212.md?match_all_tags=true&page=1&tags%5B%5D=canvas)