Canvas - basic playing card designer
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Looking to rapidly create playing card designs on a static js based page and then download a png of the final output. the visual on the page would be something like this -

Today we have to use photoshop or illustrator and it just takes a lot of time to quickly check comps. I think there is a faster way by designing in the browser and using js/canvas

the goal of the render preview it shows how the cards look fanned out as well as a single card. In the view on web its fine if we have the shadows since its what it looks like when we really use it in our app but the output png should not have any shadows.

I see the flow like this.

- we "upload" an image to the page.

- it will scale it to fit inside the card which is always going to be 400x 550. you would constrain proportions so the width is scaled and if its too tall or short then we would clip the vertical overflow and if not tall enough it would just be transparent (user error).

- the other setting we need is the border and background color.

------the border should be 2 things. 1 border thickness and 2 border color. this border would be placed on top of the background image that was provided. now one detail not immediately obvious is that the card has rounded corners but we need to output a rectangle image and the corners cant be transparent. we should fill them with the border color if specified. so the final output image ends up looking like:

----- the other setting is the background. this is needed if the uploaded image is not tall enough it will fill in the back of the card, for example we can put a logo in there and then set background to white.

Specific details:

  • cards will output as 400x550 with format of png

  • cards will have a shadow on the web ui rendering preview but not in the final output file

  • we will always constrain proportions on the uploaded image. and fit by width

  • trim overflow on height

  • if no background color is set the card might be transparent in the middle depending on the image provided.

  • borders will be filled with the rounded corner color

  • I only need this to work in chrome

  • you can assume uploaded image will be jpg or png - the png might be alpha 32 transparent.

  • from the design the current shadow in the comp is

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))

  • the corners are rounded at 9px

you can use any libs you want. The "winner" of this bounty will be the person that can make the coolest/functional card render wizard.

Winner will get $100
Runner up $50

awarded to ivankahl

Crowdsource coding tasks.

2 Solutions

Here's what I've come up so far. Let me know if you think this is in the right direction:

Just drag and drop an image in the document.

hey Kostasx - thanks ! really nice work. did some testing and hit a couple of things
1- setting the background color . i dont seem to be able to set that. its only needed for the case of a image with transparency or if it doesnt fill the space
2- when i upload a square that is 100x100 it seems to fill the entire card. what should happen is that it scales it to fit width but ends up with some top and bottom unfilled on the vertical side. this is so we know for sure we arent skewing the image that is put in there.
3- I noticed the output is 400x560 and we need it to be 400x550.
4- small nit, shadow to only show on the outside of the card, right now it shows outside and inside. I cant tell if maybe that will resolve itself when you make the background color settable?
Qdev 4 months ago
Looking into them. Will update and notify you.
kostasx 4 months ago
1) Background color added
kostasx 4 months ago
3) I am checking the output with various input images and it comes out as 400x550. Are you checking with any particular browser or input image?
kostasx 4 months ago
4) Fixed
kostasx 4 months ago
2) Fixed
kostasx 4 months ago
hey noticing the border set to 1 or zero is sitll present and big? i think its the only issue im seeing on testing today. here is a screen with the zero border set -
Qdev 4 months ago
Code updated and fixed.
kostasx 4 months ago
Thanks for the tip!
kostasx 4 months ago
Winning solution

This was an awesome challenge I enjoyed coming up with a solution! Here is what I wrote:

It is hosted in CodePen but it will also be very easy to combine everything into a single HTML file which you can save on your computer and open in your browser to use. If you want this I'll compile it into a single file and post that link.

Let me know if you run into any issues or something looks wrong and I'll take a look. I also tried to pick default values to try and match what you currently have but let me know if you want them adjusted for convenience. Thanks!

Outstanding job on this!
Qdev 4 months ago
Thanks so much!
ivankahl 4 months ago
View Timeline