# Showing a circular crop overlay We can use the [willRenderCanvas](../../api/ui/properties/#willrendercanvas) property to adjust the preview output of the editor. To apply a circular mask to the output image see the [circular mask example](../mask-image/). * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-0) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-0) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-0) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-0) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-0) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-0) * [index.html](#index-html-panel-0) ```html
``` * [App.jsx](#App-jsx-panel-0) * [App.css](#App-css-panel-0) ```jsx import '@pqina/pintura/pintura.css'; import './App.css'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { return (
{ const { utilVisibility, selectionRect, lineColor, backgroundColor, } = state; // Exit if crop utils is not visible if (utilVisibility.crop <= 0) return shapes; // Get variable shortcuts to the crop selection rect const { x, y, width, height } = selectionRect; return { // Copy all props from current shapes ...shapes, // Now we add an inverted ellipse shape to the interface shapes array interfaceShapes: [ { x: x + width * 0.5, y: y + height * 0.5, rx: width * 0.5, ry: height * 0.5, opacity: utilVisibility.crop, inverted: true, backgroundColor: [...backgroundColor, 0.5], strokeWidth: 1, strokeColor: [...lineColor], }, // Spread all existing interface shapes onto the array ...shapes.interfaceShapes, ], }; }} />
); } export default App; ``` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-0) ```html ``` * [App.svelte](#App-svelte-panel-0) ```svelte
{ const { utilVisibility, selectionRect, lineColor, backgroundColor, } = state; // Exit if crop utils is not visible if (utilVisibility.crop <= 0) return shapes; // Get variable shortcuts to the crop selection rect const { x, y, width, height } = selectionRect; return { // Copy all props from current shapes ...shapes, // Now we add an inverted ellipse shape to the interface shapes array interfaceShapes: [ { x: x + width * 0.5, y: y + height * 0.5, rx: width * 0.5, ry: height * 0.5, opacity: utilVisibility.crop, inverted: true, backgroundColor: [...backgroundColor, 0.5], strokeWidth: 1, strokeColor: [...lineColor], }, // Spread all existing interface shapes onto the array ...shapes.interfaceShapes, ], }; }} />
``` * [app.component.ts](#app-component-ts-panel-0) * [app.component.html](#app-component-html-panel-0) * [app.component.css](#app-component-css-panel-0) * [app.module.ts](#app-module-ts-panel-0) ```javascript import { Component } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { editorDefaults: any = getEditorDefaults(); // Let's draw a circle on top of the editor preview when in the crop util willRenderCanvas: any = (shapes, state) => { const { utilVisibility, selectionRect, lineColor, backgroundColor } = state; // Exit if crop utils is not visible if (utilVisibility.crop <= 0) return shapes; // Get variable shortcuts to the crop selection rect const { x, y, width, height } = selectionRect; return { // Copy all props from current shapes ...shapes, // Now we add an inverted ellipse shape to the interface shapes array interfaceShapes: [ { x: x + width * 0.5, y: y + height * 0.5, rx: width * 0.5, ry: height * 0.5, opacity: utilVisibility.crop, inverted: true, backgroundColor: [...backgroundColor, 0.5], strokeWidth: 1, strokeColor: [...lineColor], }, // Spread all existing interface shapes onto the array ...shapes.interfaceShapes, ], }; }; } ``` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularPinturaModule } from '@pqina/angular-pintura'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AngularPinturaModule], exports: [AppComponent], providers: [], bootstrap: [AppComponent], }) export class AppModule {} ``` * [index.html](#index-html-panel-0) ```html
```