Top Related Projects
The open LMS by Instructure, Inc.
Quick Overview
Canvas is a Swift library for iOS and macOS that provides a simple and intuitive way to draw 2D graphics. It offers a high-level API for creating shapes, paths, and text, making it easier for developers to create custom graphics and animations in their applications.
Pros
- Easy-to-use API with a fluent interface for creating and manipulating graphics
- Supports both iOS and macOS platforms
- Provides a wide range of drawing primitives and operations
- Integrates well with existing UIKit and AppKit components
Cons
- Limited documentation and examples available
- May not be suitable for complex or high-performance graphics requirements
- Lacks some advanced features found in lower-level graphics APIs
- Not actively maintained (last update was several years ago)
Code Examples
Drawing a simple rectangle:
let canvas = Canvas(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
canvas.drawRectangle(CGRect(x: 50, y: 50, width: 100, height: 100))
Creating a custom path:
let canvas = Canvas(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
canvas.beginPath()
canvas.moveToPoint(CGPoint(x: 50, y: 50))
canvas.addLineToPoint(CGPoint(x: 150, y: 50))
canvas.addLineToPoint(CGPoint(x: 100, y: 150))
canvas.closePath()
canvas.fillPath()
Adding text to the canvas:
let canvas = Canvas(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
canvas.setFillColor(.black)
canvas.setFont(UIFont.systemFont(ofSize: 16))
canvas.drawText("Hello, Canvas!", at: CGPoint(x: 50, y: 100))
Getting Started
To use Canvas in your project:
- Add the Canvas repository as a submodule or download the source files.
- Add the Canvas.swift file to your Xcode project.
- Import Canvas in your Swift file:
import Canvas
// Create a canvas
let canvas = Canvas(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
// Add the canvas to your view
view.addSubview(canvas)
// Start drawing
canvas.setFillColor(.blue)
canvas.drawCircle(center: CGPoint(x: 150, y: 150), radius: 50)
Competitor Comparisons
The open LMS by Instructure, Inc.
Pros of Canvas LMS
- Larger, more active community with frequent updates and contributions
- More comprehensive feature set for educational institutions
- Extensive documentation and support resources
Cons of Canvas LMS
- Steeper learning curve due to its complexity
- Requires more server resources to run effectively
- Less flexible for small-scale or custom implementations
Code Comparison
Canvas LMS (Ruby):
class Assignment < ActiveRecord::Base
include Workflow
include TextHelper
include HasContentTags
include CopyAuthorizedLinks
include ContextModuleItem
Canvas (Swift):
public class Canvas: UIView {
public var delegate: CanvasDelegate?
public var drawingGesture: DrawingGesture?
public var eraserGesture: EraserGesture?
The Canvas LMS repository is a full-featured learning management system written in Ruby on Rails, while the Canvas repository is a Swift-based drawing library for iOS applications. The code snippets highlight the different focus areas and technologies used in each project.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Canvas is a project to simplify iOS development for both designers and developers. It had been difficult for designers to get hands on building the product with the lack of objective-c and Xcode experience, and a hard time for developer to use reasonable amount of time and lines of code just to achieve really simple effects.
With Canvas, creating stunning animations requires zero lines of code, trendy effects like the Parallax headers, Sticky sections, Blurred Backgrounds, will be as simple as few lines of code changes.
Demo App
The demo app in this project uses CocoaPods, please run pod install after you download this project, then open Canvas.xcworkspace.
See this screencast in action:
Unable to build demo?
If you're getting some errors like Accelerate.framework not include, please update your CocoaPods version:
$ [sudo] gem install cocoapods
We also have a live demo avaliable at homepage.
Getting Started
If you're already on CocoaPods, installing our library is easy:
$ edit Podfile
platform :ios, '7.0'
pod 'Canvas', '~> 0.1.2'
Make sure you also update the dependencies by running this command afterwards:
pod install
Then you should now have the Xcode workspace (.xcworkspace) ready.
$open App.xcworkspace
That's it and you are good to go! See our blog posts for hands on tutorial.
How to Use
Using Interface Builder (no code required)
Specify the class CSAnimationView, and configurate the runtime attributes duration, delay, and type.
Please also get started with our more detailed explaination on what Canvas can do.
Using Code
It's very similar to using Interface Builder, instead you just setup the custom view in code.
#import "Canvas.h"
CSAnimationView *animationView = [[CSAnimationView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
animationView.backgroundColor = [UIColor whiteColor];
animationView.duration = 0.5;
animationView.delay = 0;
animationView.type = CSAnimationTypeMorph;
[self.view addSubview:animationView];
// Add your subviews into animationView
// [animationView addSubview:<#(UIView *)#>]
// Kick start the animation immediately
[animationView startCanvasAnimation];
Issues
It has been reported that current version doesn't work very well with AutoLayout. Canvas animates view frame/position but autolayout requires manipulating constraints. I am not sure if there's any quick way without changing from the ground up. Our discussion here has some proposed solution but seems imperfect (but it works under iOS 8 tho). Please join our conversation or make pull request if you know a better solution!
Updates
v0.1.2 - 9 new animations, thanks for Jake-Piatkowski adding those awesome effects!
v0.1.1 - Minor fixes
v0.1 - Initial release
Requirements
iOS 7, Xcode 5
Who's behind?
LICENSE
Canvas is available under the MIT license. See the LICENSE file for more info.
Top Related Projects
The open LMS by Instructure, Inc.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot