How to draw with CSS canvas a slideshow frame?

Tags: jquery,css,canvas,css3

Problem :

I have 2 slideshows which should look like this. The user will upload the photos via a Wordpress gallery so I can't cut them up to make them transparent (plus I don't really know how). I've already posted a question here on how I may achieve this and one user was kind enough to tell me that I have 2 options: webkit mask and canvas; canvas being the recommended option because of better browser support.

For the past hour I've been searching on the Internet on how to draw with canvas but I've had no luck...

Could you please direct me to a tutorial that's easy to follow or give me some pointers?

Thank you!!

Solution :

I would recommend MDN's docs on the subject.

There are also some good resources in a similar question.

    CSS Howto..

    How to have elements copy other element's auto height css?

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    How to assign CSS to mobile page in

    jquery-ui icons not showing in production environment

    Is XSS possible via an @import, and if so how? Are there ways to protect against it?

    site only shows half screen on mobile? Rest of screen is just body background?

    How do you ad stylesheets to JSDOM

    How to display drop down menu with an arrow in the top using css?

    How to script CSS to achieve hide/appear effect based on hover

    How do I get a div to be positioned above an image?

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    How to apply the CSS of navbar-inverse in twitter-bootstrap

    how to vertically align div opposite to each other

    How to bottom center a span inside a list item

    How to load jQuery before CSS code?

    How to make all my div's same height based on breathing content

    JS+CSS How to display images from an array from top right to bottom left

    JSP/HTML / JS / CSS - How to create a cancel button in form

    CSS: How would I select a specific Text and hide it

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    Trade off for CSS sprites: how many images to combine into one

    How to merge .CSS files with Sass (or other tool)? [duplicate]

    How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

    how can I combine button with input?

    Use ::after selector to show line number but also display a element next to it when hovering over the containing table td cell

    How to do a resizable link a:hover in CSS

    How to Make DD Wrap under DT When DD Content has No Spaces

    How to style this with css? [closed]

    How to avoid width calculation, can this be done with just CSS?

    How to I bring my sticky navbar in front of the contents on my page?