Текст перед фоновым приложением Quil canvas

Question

Я написал приложение веб-страницы Clojurescript Quil, которое состоит из объектов, плавающих вокруг. Эта "игра" должна быть фоном для обычного HTML-текста. У Quil есть текстовые способности, но я не нашел примеров того, что мне нужно делать. В идеале я хотел бы, чтобы текст веб-страницы отображался на слое над игрой, используя что-то вроде Sablono, и не беспокоиться о проблемах прозрачности или любых других проблемах - игра просто находится в фоновом режиме!

Если невозможно поместить Quil на слой ниже, то я вполне уверен, что смогу сделать это в Quil, но будет много деталей, чтобы разобраться: z-упорядочение, при котором текст будет сохранять свой цвет, наличие фона прямоугольника, содержащего символ, должно быть прозрачным и т. д. - многих проблем, которые я бы хотел избежать.

Какой самый простой способ иметь текстовый слой html поверх слоя холста при данной настройке?

Следующее - это то, что я придумал до сих пор, это рисует текст в той же функции, что и анимация, но после анимации. Не совсем то, что я ищу, но что, возможно, придется сделать:

(ns scratch.core
  (:require [quil.core :as q :include-macros true]
            [quil.middleware :as m]))

(def dark-blue [0,0,139])

(defn setup []
  (q/text-font (q/create-font "DejaVu Sans" 28 true))
  (q/frame-rate 15)
  ; Set color mode to HSB (HSV) instead of default RGB.
  ;(q/color-mode :hsb)
  ; setup function returns initial state. It contains
  ; circle color and position.
  {:color 0
   :angle 0})

(defn draw-text
  []
  (apply q/fill dark-blue)
  (q/text "The quick, brown fox jumped over the lazy dog"
          100 200 300 200))

(defn update-state [state]
  ; Update sketch state by changing circle color and position.
  {:color (mod (+ (:color state) 0.7) 255)
   :angle (+ (:angle state) 0.1)})

(defn draw-state [state]
  ; Clear the sketch by filling it with light-grey color.
  (q/background 240)
  ; Set circle color.
  (q/fill (:color state) 255 255)
  ; Calculate x and y coordinates of the circle.
  (let [angle (:angle state)
        x (* 150 (* 0.4 (q/cos angle)))
        y (* 150 (* 0.4 (q/sin angle)))]
    ; Move origin point to the center of the sketch.
    (q/with-translation [(/ (q/width) 2)
                         (/ (q/height) 2)]
      ; Draw the circle.
      (q/ellipse x y 100 100)))
  ;; Simply make sure the text is drawn after the 'background'
  (draw-text))

(q/defsketch moving-ball
  :host "moving-ball"
  :size [500 500]
  :setup setup
  :update update-state
  :draw draw-state
  :middleware [m/fun-mode])  

Answer 1

Вот этот вопрос несколько ответил в другом месте. Однако используемый в вопросе обходной подход - рисование текста на холсте - вероятно, будет достаточно хорош для моего варианта использования.