How to place image on top of uiview drawing (swift5)

My code below places a behind a drawing area. So as you can see in the image below. Anything I draw goes in front of the lines. I want to make so whatever i draw goes behind the lines. All of my code is attached below. The image is in the assets folder as well.

                  class ViewController: UIViewController {
var editBtn = UIButton()
var canVasView = UIView()
var path = UIBezierPath()
var startPoint = CGPoint()
var touchPoint = CGPoint()

func addArrowImageToButton(button: UIButton, arrowImage:UIImage = #imageLiteral(resourceName: "graph.png") ) {
    let btnSize:CGFloat = 32
    let imageView = UIImageView(image: arrowImage)
    let btnFrame = button.frame


override func viewDidAppear(_ animated: Bool) {
    self.addArrowImageToButton(button: editBtn)

override func viewDidLoad() {


    editBtn.backgroundColor =
    canVasView.backgroundColor = UIColor.purple

    editBtn.translatesAutoresizingMaskIntoConstraints = false
    canVasView.translatesAutoresizingMaskIntoConstraints = false

    let myLayer = CALayer()
    let myImage = UIImage(named: "graph.png")?.cgImage
    myLayer.frame = CGRect(x: 40, y: -80, width: 300, height: 300)
    myLayer.contents = myImage


    NSLayoutConstraint.activate ([
        canVasView.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :175),
        canVasView.topAnchor.constraint(equalTo: view.centerYAnchor, constant : 100),
        canVasView.widthAnchor.constraint(equalToConstant: 350),
        canVasView.heightAnchor.constraint(equalToConstant: 180),

        editBtn.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :175),
        editBtn.topAnchor.constraint(equalTo: view.centerYAnchor, constant : 0),
        editBtn.widthAnchor.constraint(equalToConstant: 350),
        editBtn.heightAnchor.constraint(equalToConstant: 180),

    editBtn.addTarget(self, action: #selector(didTapEditButton), for: .touchUpInside)

@objc func didTapEditButton() {
    canVasView.layer.sublayers = nil

    self.addArrowImageToButton(button: editBtn)

func setup(){
    editBtn.layer.cornerRadius = 20
    canVasView.clipsToBounds = true
    canVasView.isMultipleTouchEnabled = false

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    let touch = touches.first
    if let point = touch?.location(in: canVasView){
        startPoint = point

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    let touch = touches.first
    if let point = touch?.location(in: canVasView){
        touchPoint = point

    path.move(to: startPoint)
    path.addLine(to: touchPoint)
    startPoint = touchPoint

func draw() {
    let strokeLayer = CAShapeLayer()
    strokeLayer.fillColor = nil
    strokeLayer.lineWidth = 5
    strokeLayer.strokeColor =
    strokeLayer.path = path.cgPath


hi @timswift,
It is difficult to debug the code, however the problem you describe suggests that the layer where you are drawing when added to the canvas is added on top, you can specifically use addSublayer with as specific index or using the below parameter.


I have found a answer via stack overflow thanks.

This topic was automatically closed after 166 days. New replies are no longer allowed.