User Tools

Site Tools

Translations of this page?:


Hints & Tips

This page will list many hints, tips & snippets about ways to get current, frequent, or difficult things in the Geckos engine.

About the card canvas creation

Those hints will help you design your card.

Image from the user in a non-rectangular frame

Sometimes, an image loaded in a card needs to appear in a frame that is not-rectangular. We could create a shape to clip it, but that will be tedious. If a generic image background is used to decorate the card, there's an easier method.

A card with a non-rectangular frame

If I have an Image background, I set the canvasFields section like this :

"canvasFields": [
  { "type": "image", "width": 880, "height":1201, "src": "data:image/png;base64,iVBORw0..." }

Note that the DataUrl has been voluntarily truncated.

Let's say I've added a field allowing the user to load an image, with the field's name being picture. I can add the picture to the canvas, but it will appear in a rectangle, and be over my top left area.

How to correct that ? Well, first, edit your image. Get it in PNG format, and set the area where the image should appear to a transparent color. Save your image, translate it to DataUrl (or static url), and copy it to your template. If you test your template without loading any image, you should see your background color.

Good, now, edit your canvasField section by putting your image linked to picture before your background image. By getting your custom image underneath, the background image will not be written over !

en/hints_tips.txt · Last modified: 2016/08/10 15:59 by Nicolas Ronvel