# Create Scratch like game on CANVAS **URL:** \ **Category:** Phaser 3\ **Created:** [April 2, 2021, 11:18am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235 "2021-04-02T11:18:50Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 2, 2021, 11:18am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/1 "2021-04-02T11:18:50Z")
good afternoon. In the examples, there is such a mini-game, scratch.: [https://phaser.io/examples/v3/view/game-objects/render-texture/scratch](https://phaser.io/examples/v3/view/game-objects/render-texture/scratch) Here, type: Phaser.Webgl is set in config. Is it possible to make the same game, but on Canvas? ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [April 2, 2021, 11:36am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/2 "2021-04-02T11:36:55Z")
> **[Phaser - Examples - Canvas Texture Composite Op](http://phaser.io/examples/v3/view/textures/canvas-texture-composite-op)** > > Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games. https://codepen.io/aj1215/embed/preview/obBdKN?height=300&slug-hash=obBdKN&default-tabs=js,result&host=https://codepen.io ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 2, 2021, 11:40am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/3 "2021-04-02T11:40:47Z")
Thank you ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 2, 2021, 2:05pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/4 "2021-04-02T14:05:42Z")
I have an additional question: how can I determine that the top layer is completely erased (scratched) (or a certain part of it: 50%, 70%, 90%)? How do I detect that the player has erased the top layer and show it a picture or perform another action? ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [April 2, 2021, 3:00pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/5 "2021-04-02T15:00:10Z")
The codePen example does this: handlePercentage(getFilledInPixels(32)); It basically checks every pixel, so for performance reasons it ‘strides’. ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 5, 2021, 12:36pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/6 "2021-04-05T12:36:36Z")
I need some help as there are issues with both options at the moment. In the first case, if I use RenderTexture, the browser breaks: the screen is black, there is nothing in the console (and no errors), no button works, you can’t refresh the page (only restarting the browser helps). At the same time, the example on the first link works correctly in the browser. What about the second example (links): do I understand correctly that Phaser supports all the tools that are available in the standard canvas as well? That is, you can integrate the code from the second link into the classes using the Phaser methods? ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [April 5, 2021, 12:52pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/7 "2021-04-05T12:52:48Z")
The first example doesn’t use a RenderTexture. Both examples use a standard Canvas, so yes, Phaser supports exactly the same. You can basically use the codePen example as is. Maybe put your breaking code online somewhere. ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 5, 2021, 12:56pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/8 "2021-04-05T12:56:55Z")
I’m sorry, I made a mistake with the first link - I meant it: [https://labs.phaser.io/edit.html?src=src/game%20objects/render%20texture/erase%20part%20of%20render%20texture%20canvas.js&v=3.54.0#](https://labs.phaser.io/edit.html?src=src/game%20objects/render%20texture/erase%20part%20of%20render%20texture%20canvas.js&v=3.54.0#) ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [April 5, 2021, 1:05pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/9 "2021-04-05T13:05:48Z")
Works for me. To count pixels on a RenderTexture you would have to draw it on a CanvasTexture, so I think you’re better of just using a CanvasTexture. ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 5, 2021, 1:20pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/10 "2021-04-05T13:20:07Z")
First of all, I want to thank you again for your help. If you don’t mind, let’s start from the beginning and in order. I need to create the following mini-game using Phaser 3. Starting data: - background image (not interactive) - character on Scene (this two images: the character itself and the black shadow on top (it is as if it is closed by it)). I attach an image for an example The gameplay is as follows: when the player draws on the shadow of the character, the real image of the hero appears in this place, which is under the shadow (the player seems to erase the image). ![New Project](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/6/6bc7c79d210a03024485eb6de7c3e6d353f5290d.jpeg) When the shadow is completely erased (or most of it), a greeting pops up How should I start? Thank you very much for any help Upd. If I want to integrate the code from the example at the 2nd link (codepen), then I should use this - [Phaser 3 API Documentation - Class: CanvasTexture](https://photonstorm.github.io/phaser3-docs/Phaser.Textures.CanvasTexture.html). Am I right? ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [April 5, 2021, 1:48pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/11 "2021-04-05T13:48:35Z")
> [@Dima28](#): > > Upd. If I want to integrate the code from the example at the 2nd link (codepen), then I should use this - [Phaser 3 API Documentation - Class: CanvasTexture](https://photonstorm.github.io/phaser3-docs/Phaser.Textures.CanvasTexture.html). Am I right? Yes. The first link (from the solution) already does this. You can just use that example. Add the background to the scene. Add your character to the scene. Now create a CanvasTexture. Draw your shadow on the canvas. Add the canvas to the scene. Now if you draw with the brush, the shadow will disappear. ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 5, 2021, 1:58pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/12 "2021-04-05T13:58:57Z")
> this.background = this.add.image(0, 0, ‘background’); > this.womanOwl = this.add.image(0, 0, ‘heroowl’); > const canvasText = this.textures.createCanvas(‘canvastexture’, 800, 600); I started with this on my Scene. But an error appeared in the console: “ **Texture key already in use: canvastexture** ”. I didn’t use “canvastexture” anywhere else in the code ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [April 5, 2021, 2:05pm UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/13 "2021-04-05T14:05:36Z")
That doesn’t make sense 😄 Create a CodePen, and login on Discord, then I can guide you through. ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 6, 2021, 8:22am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/14 "2021-04-06T08:22:09Z")
I have solved the problem with creating a canvas Texture, however this is just the beginning of my problems)) I created a codepen example on phaser 3 (copied the basis of another project): https://codepen.io/Razdobudko/embed/preview/jOywvGP?height=300&slug-hash=jOywvGP&default-tabs=js,result&host=https://codepen.io I added a canvas Texture, created an image from base64 (as in the example on codepen) and am trying to draw this image. But nothing is displayed. I suppose the problem is exactly how I add the image, right? ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [April 6, 2021, 8:52am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/15 "2021-04-06T08:52:32Z")
Fork this example: https://codepen.io/miltonw-the-typescripter/embed/preview/dyNzORr?height=300&slug-hash=dyNzORr&default-tabs=js,result&host=https://codepen.io ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 6, 2021, 8:59am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/16 "2021-04-06T08:59:26Z")
It works! That is, I only needed to add the created canvas texture to the scene as an image (this.add.image)? Thank you very much! UPD. And what it is necessary for this: > this. add. image(0, 0, ‘canvastexture’). setOrigin(0) I know how setOrigin works, but here for some reason it has a different logic than the one I’m used to ---
**Author:** ![Dima28](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dima28/32/4853_2.png) [@Dima28](https://phaser.discourse.group/u/Dima28)\ **Post date:** [April 6, 2021, 9:53am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/17 "2021-04-06T09:53:32Z")
If you don’t mind, we’ll continue. Now I need to make the image interactive. I can’t hang the **addEventListener** (addListener) on the canvas Texture that the block is drawn with, right? So I need to add interactivity to the block image itself? So that I can erase it and develop the image underneath it (which will be added later), right? ---
**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\ **Post date:** [April 6, 2021, 9:59am UTC](https://phaser.discourse.group/t/create-scratch-like-game-on-canvas/9235/18 "2021-04-06T09:59:39Z")
A forum doesn’t lend itself for quick back and forth. Please continue on [https://discord.gg/phaser](https://discord.gg/phaser)